/* "The problem" section: heading and the venue chart. Totals live in bypass-total.css. */

.sota-divider { border-bottom: 1px dashed #0000000f; }

.sota-head { padding-bottom: calc(var(--spacing) * 10) !important; }
.sota-head h3 {
  margin-bottom: calc(var(--spacing) * 3);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  line-height: calc(var(--spacing) * 8);
}
.sota-head p { color: var(--muted-foreground); font-size: var(--text-base); line-height: var(--text-base--line-height); }

/* "land" starts pale, then a blue highlight sweeps across it and leaves it dark (bypass.js). */
.highlight { color: #d0d6d8; }
.highlight.is-sweeping {
  color: transparent;
  background: linear-gradient(90deg in srgb, var(--color-mist-950) 0%, var(--color-mist-950) 42%, #d0d6d8 50%,
    #38bdf8 62%, #1662fd 70%, #38bdf8 78%, #d0d6d8 84%, #d0d6d8 100%) 100% center / 400% 100% no-repeat;
  background-clip: text;
  animation: sweep 1.4s cubic-bezier(.45, 0, .25, 1) .15s forwards;
}
.highlight.is-done { color: var(--color-mist-950); }
@keyframes sweep { to { background-position: 0% center; } }

.chart-cell { padding-top: 0 !important; padding-inline: 0 !important; }
.bench { display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); }

.bench-rows { border-block: 1px solid #0000000f; }
.bench-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 11);
  padding-inline: calc(var(--spacing) * 3);
  border-top: 1px solid #0000000f;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .34s cubic-bezier(.22, 1, .36, 1), translate .34s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--delay);
}
.bench-row:first-child { border-top: 0; }
.is-in .bench-row { opacity: 1; translate: 0 0; }

.bench-name { display: flex; flex-shrink: 0; align-items: center; gap: 6px; width: calc(var(--spacing) * 28); min-width: 0; }
.bench-name img, .bench-name .bench-glyph { flex-shrink: 0; width: 20px; height: 20px; }
.bench-name .bench-glyph { border-radius: 50%; background: var(--color-neutral-200); }
.bench-name span { display: flex; flex-direction: column; min-width: 0; color: var(--primary); font-size: var(--text-sm); white-space: nowrap; }
.bench-name b { font-weight: var(--font-weight-medium); }
.bench-name small { overflow: hidden; color: var(--muted-foreground); font-size: var(--text-xs); text-overflow: ellipsis; }

.bench-track { display: flex; flex: 1; align-items: center; gap: 3px; height: 100%; min-width: 0; padding-right: 8px; }
.bench-bar {
  width: 0;
  height: 18px;
  border-radius: 2px;
  background: var(--color-neutral-200);
  transition: width .46s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--delay);
}
.bench-bar.is-lead { min-width: 4px; background: #1f6fff; }
.is-in .bench-bar { width: var(--w); }

.bench-value {
  flex-shrink: 0;
  width: calc(var(--spacing) * 16);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bench-tip {
  position: fixed;
  z-index: 60;
  padding: 6px 12px 6px 8px;
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-radius: var(--radius-md);
  background: var(--background);
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  color: var(--primary);
  font: var(--font-weight-medium) var(--text-xs) / 1.4 var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}
.bench-tip small { color: var(--muted-foreground); font-size: inherit; }

@media (prefers-reduced-motion: reduce) {
  .bench-row, .bench-bar { transition: none; }
  .highlight.is-sweeping { animation: none; color: var(--color-mist-950); }
}
@media (min-width: 48rem) {
  .sota-head { padding-top: calc(var(--spacing) * 16); }
  .chart-cell { padding-inline: calc(var(--spacing) * 14) !important; }
  .bench { gap: calc(var(--spacing) * 10); }
  .bench-row { padding-inline: 0; }
  .bench-name { gap: 8px; width: calc(var(--spacing) * 56); }
  .bench-name img, .bench-name .bench-glyph { width: 28px; height: 28px; }
  .bench-name b, .bench-value { font-size: var(--text-base); }
  .bench-name small { font-size: var(--text-sm); }
  .bench-track { padding-right: 12px; }
  .bench-value { width: calc(var(--spacing) * 22); }
}
@media (min-width: 64rem) { .bench-row { height: calc(var(--spacing) * 14); } .bench-bar { height: 24px; } }
@media (min-width: 80rem) {
  .sota-head { padding-inline: calc(var(--spacing) * 66) !important; }
  .sota-head h3 { font-size: var(--text-3xl); line-height: calc(var(--spacing) * 10); }
  .sota-head p { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
  .chart-cell { padding-inline: calc(var(--spacing) * 36) !important; }
  .bench-name { width: calc(var(--spacing) * 64); }
  .bench-value { width: calc(var(--spacing) * 26); }
}