/*
THESIS: Turn the leaderboard into a calm model-selection workspace, not a promotional chart.
OWN-WORLD: Atlassian light product UI: white canvas, sunken wells, 8px rhythm, blue navigation, semantic status, and chart-token color.
STORY: A visitor sees the live benchmark context, identifies the value leader, then compares every configuration and its evidence.
FIRST VIEWPORT: Global header, benchmark rail, page title, leader summary, snapshot facts, and the top of the vertical chart share the opening view.
FORM: Operate-mode dashboard with a persistent source rail, bordered containers, selectable chart lanes, and a horizontally scrollable full-field table.
*/

:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-sunken: #f8f8f8;
  --surface-hovered: #f0f1f2;
  --surface-pressed: #dddde1;
  --surface-selected: #e9f2fe;
  --surface-success: #efffd6;
  --surface-warning: #fff5db;
  --surface-discovery: #f8eefe;
  --text: #292a2e;
  --text-subtle: #505258;
  --text-subtlest: #6b6e76;
  --text-inverse: #ffffff;
  --brand: #1868db;
  --brand-pressed: #1558bc;
  --border: #0b120e24;
  --border-bold: #7d818a;
  --border-input: #8c8f97;
  --border-focused: #4688ec;
  --border-selected: #1868db;
  --success-text: #4c6b1f;
  --success-border: #b3df72;
  --warning-text: #9e4c00;
  --warning-border: #fbc828;
  --discovery-text: #803fa5;
  --discovery-border: #d8a0f7;
  --information-border: #8fb8f6;
  --chart-blue: #357de8;
  --chart-lime: #82b536;
  --chart-purple: #bf63f3;
  --chart-orange: #f68909;
  --chart-navy: #1558bc;
  --chart-violet: #964ac0;
  --chart-teal: #42b2d7;
  --chart-brown: #bd5b00;
  --space-0: 0rem;
  --space-025: 0.125rem;
  --space-050: 0.25rem;
  --space-075: 0.375rem;
  --space-100: 0.5rem;
  --space-150: 0.75rem;
  --space-200: 1rem;
  --space-250: 1.25rem;
  --space-300: 1.5rem;
  --space-400: 2rem;
  --space-500: 2.5rem;
  --space-600: 3rem;
  --space-800: 4rem;
  --space-1000: 5rem;
  --radius-xsmall: 0.125rem;
  --radius-small: 0.25rem;
  --radius-medium: 0.375rem;
  --radius-large: 0.5rem;
  --radius-xlarge: 0.75rem;
  --radius-full: 624.9375rem;
  --border-default: 0.0625rem;
  --border-selected-width: 0.125rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 653;
  --motion-short: 150ms;
  --motion-medium: 200ms;
  --motion-long: 250ms;
  --motion-xlong: 400ms;
  --ease-out: cubic-bezier(0.4, 1, 0.6, 1);
  --ease-out-bold: cubic-bezier(0, 0.4, 0, 1);
}

* { box-sizing: border-box; }

html { min-width: 20rem; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Atlassian Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; }
button { color: inherit; }
a { color: var(--brand); }
svg { display: block; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: var(--border-selected-width) solid var(--border-focused);
  outline-offset: var(--space-025);
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: var(--space-100);
  left: var(--space-100);
  transform: translateY(-150%);
  padding: var(--space-100) var(--space-150);
  border-radius: var(--radius-medium);
  background: var(--brand);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: transform var(--motion-short) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }

.global-header {
  position: sticky;
  z-index: 5;
  top: 0;
  border-bottom: var(--border-default) solid var(--border);
  background: var(--surface);
}

.global-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 var(--space-400);
  gap: var(--space-300);
}

.brand-lockup, .header-context, .header-meta, .lozenge, .source-nav-item, .provider-cell, .external-link, .side-rail-note, .filter-input, .status-line, .chart-legend, .section-meta, .leader-status {
  display: inline-flex;
  align-items: center;
}

.brand-lockup {
  flex: 0 0 auto;
  gap: var(--space-100);
  color: var(--text);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-medium);
  background: var(--brand);
  color: var(--text-inverse);
  font-size: 1rem;
  font-weight: var(--weight-bold);
}

.brand-name { white-space: nowrap; }

.header-context { gap: var(--space-150); color: var(--text-subtle); }
.header-context-title { font-weight: var(--weight-medium); }

.lozenge {
  min-height: 1.5rem;
  gap: var(--space-050);
  padding: var(--space-025) var(--space-100);
  border: var(--border-default) solid var(--border);
  border-radius: var(--radius-small);
  color: var(--text-subtle);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  line-height: 1;
}

.lozenge-success { border-color: var(--success-border); background: var(--surface-success); color: var(--success-text); }
.lozenge-neutral { background: var(--surface-sunken); }
.status-dot { width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background: currentColor; }

.header-meta {
  flex: 0 0 auto;
  gap: var(--space-100);
  color: var(--text-subtle);
  font-size: 0.75rem;
}

.header-meta-icon { color: var(--text-subtlest); }

.workspace {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  max-width: 96rem;
  min-height: calc(100vh - 4rem);
  margin: 0 auto;
}

.side-rail {
  border-inline-end: var(--border-default) solid var(--border);
  background: var(--surface);
}

.side-rail-inner {
  position: sticky;
  top: 4rem;
  padding: var(--space-400) var(--space-200);
}

.side-rail-heading {
  margin: 0 var(--space-100) var(--space-150);
  color: var(--text-subtlest);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
}

.source-nav { display: grid; gap: var(--space-050); }

.source-nav-item {
  position: relative;
  width: 100%;
  min-height: 3.5rem;
  gap: var(--space-100);
  padding: var(--space-100);
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-medium);
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--motion-short) var(--ease-out), border-color var(--motion-short) var(--ease-out), color var(--motion-short) var(--ease-out);
}

.source-nav-item:hover { background: var(--surface-hovered); }
.source-nav-item.is-active { border-color: var(--border-selected); background: var(--surface-selected); color: var(--brand-pressed); }
.source-nav-item.is-active::before { position: absolute; inset-block: var(--space-100); inset-inline-start: calc(var(--space-100) * -1); width: var(--border-selected-width); background: var(--brand); content: ""; }

.source-nav-icon {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-medium);
  background: var(--brand);
  color: var(--text-inverse);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
}

.source-nav-icon-muted { background: var(--surface-sunken); color: var(--text-subtle); }
.source-nav-copy { display: grid; min-width: 0; gap: var(--space-025); }
.source-nav-copy strong { overflow: hidden; font-size: 0.875rem; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.source-nav-copy small { color: var(--text-subtlest); font-size: 0.75rem; }
.source-nav-state { margin-inline-start: auto; color: var(--success-text); font-size: 0.6875rem; font-weight: var(--weight-semibold); }
.source-nav-state.is-muted { color: var(--text-subtlest); }

.side-rail-note {
  align-items: flex-start;
  gap: var(--space-100);
  margin-top: var(--space-400);
  padding: var(--space-150);
  border-radius: var(--radius-large);
  background: var(--surface-sunken);
  color: var(--text-subtle);
}

.side-rail-note-icon { flex: 0 0 auto; margin-top: var(--space-025); color: var(--text-subtlest); }
.side-rail-note div { display: grid; gap: var(--space-025); }
.side-rail-note strong { font-size: 0.75rem; font-weight: var(--weight-semibold); }
.side-rail-note span { color: var(--text-subtlest); font-size: 0.75rem; }

.main-content {
  min-width: 0;
  padding: var(--space-500) var(--space-500) var(--space-1000);
}

.main-content:focus { outline: 0; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-400);
  padding-bottom: var(--space-400);
  border-bottom: var(--border-default) solid var(--border);
}

.page-header-copy { min-width: 0; max-width: 52rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100); margin-bottom: var(--space-150); color: var(--text-subtlest); font-size: 0.75rem; }
.breadcrumbs a { color: var(--text-subtle); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb-separator { color: var(--text-subtlest); }

h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { color: var(--text); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
h1 { margin-block-end: var(--space-100); font-size: 2rem; line-height: 2.25rem; }
h2 { margin-block-end: var(--space-100); font-size: 1.5rem; line-height: 1.75rem; }
h3 { margin-block-end: var(--space-100); font-size: 1.25rem; line-height: 1.5rem; }

.page-header-copy p { max-width: 48rem; margin-block-end: 0; color: var(--text); font-size: 1rem; line-height: 1.5; }
.page-header-side { display: grid; flex: 0 0 auto; align-content: start; justify-items: end; gap: var(--space-150); min-width: 12rem; }
.status-line { gap: var(--space-100); color: var(--text-subtle); font-size: 0.75rem; }
.status-line .status-dot { color: var(--success-text); }
.external-link { gap: var(--space-050); font-weight: var(--weight-medium); text-decoration: none; }
.external-link:hover { text-decoration: underline; }
.external-icon { display: inline-flex; }

.reveal { animation: enter var(--motion-xlong) var(--ease-out-bold) both; }
.reveal-1 { animation-delay: 50ms; }
.reveal-2 { animation-delay: 100ms; }
.reveal-3 { animation-delay: 150ms; }
.reveal-4 { animation-delay: 200ms; }
.reveal-5 { animation-delay: 250ms; }

.summary-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); gap: var(--space-300); margin-top: var(--space-400); }
.leader-card, .chart-card, .details-card, .table-card, .empty-state { border: var(--border-default) solid var(--border); border-radius: var(--radius-large); background: var(--surface); }

.leader-card { padding: var(--space-300); }
.leader-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-200); }
.eyebrow { margin-block-end: var(--space-100); color: var(--text-subtle); font-size: 0.75rem; font-weight: var(--weight-semibold); }
.leader-card h2 { margin-block-end: var(--space-025); }
.leader-card-title { color: var(--text-subtle); }
.leader-status { gap: var(--space-050); margin-top: var(--space-025); }
.leader-status .lozenge { flex: 0 0 auto; }
.leader-primary { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-300); margin-top: var(--space-300); }
.leader-model { min-width: 0; }
.leader-model strong { display: block; overflow: hidden; color: var(--text); font-size: 1.5rem; font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.leader-model span { display: block; margin-top: var(--space-050); color: var(--text-subtle); }
.leader-score { flex: 0 0 auto; text-align: end; }
.leader-score small { display: block; margin-bottom: var(--space-050); color: var(--text-subtlest); font-size: 0.75rem; }
.leader-score strong { display: block; color: var(--success-text); font-size: 1.75rem; font-weight: var(--weight-bold); line-height: 2rem; }
.leader-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-200); margin-top: var(--space-300); padding-top: var(--space-200); border-top: var(--border-default) solid var(--border); }
.leader-metric { display: grid; gap: var(--space-050); }
.leader-metric span { color: var(--text-subtlest); font-size: 0.75rem; }
.leader-metric strong { color: var(--text); font-size: 0.875rem; font-weight: var(--weight-semibold); }

.snapshot-panel { padding: var(--space-300); border-radius: var(--radius-large); background: var(--surface-sunken); }
.snapshot-panel h2 { margin-block-end: var(--space-200); }
.snapshot-list { margin: 0; }
.snapshot-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-200); padding-block: var(--space-150); border-top: var(--border-default) solid var(--border); }
.snapshot-item:first-child { padding-block-start: 0; border-top: 0; }
.snapshot-item:last-child { padding-block-end: 0; }
.snapshot-item dt { color: var(--text-subtle); }
.snapshot-item dd { margin: 0; color: var(--text); font-weight: var(--weight-semibold); text-align: end; }
.snapshot-item dd small { display: block; margin-top: var(--space-025); color: var(--text-subtlest); font-size: 0.75rem; font-weight: var(--weight-regular); }

.chart-card { margin-top: var(--space-400); overflow: hidden; }
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-300); padding: var(--space-300); }
.section-header p { max-width: 42rem; margin-block-end: 0; color: var(--text-subtle); }
.section-meta { flex: 0 0 auto; gap: var(--space-100); color: var(--text-subtle); font-size: 0.75rem; white-space: nowrap; }
.chart-legend { gap: var(--space-100); color: var(--text-subtle); font-size: 0.75rem; }
.legend-swatch { width: 0.625rem; height: 0.625rem; border-radius: var(--radius-xsmall); background: var(--chart-blue); }

.chart-frame { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-100); min-height: 27.5rem; padding: var(--space-300); border-top: var(--border-default) solid var(--border); border-bottom: var(--border-default) solid var(--border); background: var(--surface-sunken); }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--space-050) 5rem; color: var(--text-subtlest); font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; text-align: end; }
.chart-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; padding-block-end: var(--space-150); overscroll-behavior-inline: contain; scrollbar-color: var(--brand) var(--surface-sunken); scrollbar-width: thin; }
.chart-grid { position: relative; min-width: max(100%, calc(var(--bar-count) * 5.5rem)); height: 27.5rem; padding-inline-end: var(--space-100); }
.chart-gridline { position: absolute; inset-inline: 0; z-index: 0; height: var(--border-default); background: var(--border); }
.bars { position: absolute; inset: 0; z-index: 1; display: flex; align-items: stretch; padding-inline-start: var(--space-050); }
.bar-column { position: relative; display: flex; flex: 0 0 5rem; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 5rem; padding-inline: var(--space-050); border: 0; background: transparent; color: var(--text); cursor: pointer; scroll-snap-align: start; }
.bar-column:hover, .bar-column.is-selected { background: var(--surface-selected); }
.bar-column:focus-visible { outline-offset: calc(var(--space-025) * -1); }
.bar-value { min-height: 1.25rem; margin-block-end: var(--space-050); color: var(--text-subtle); font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.bar-shell { display: flex; align-items: flex-end; justify-content: center; width: 2rem; height: calc(100% - 8rem); border-bottom: var(--border-default) solid var(--border-bold); }
.bar { display: block; width: 100%; min-height: var(--space-050); background: var(--chart-blue); transition: filter var(--motion-short) var(--ease-out), background-color var(--motion-short) var(--ease-out); }
.bar[data-provider="anthropic"] { background: var(--chart-lime); }
.bar[data-provider="z-ai"] { background: var(--chart-purple); }
.bar[data-provider="moonshot-ai"] { background: var(--chart-orange); }
.bar[data-provider="google"] { background: var(--chart-navy); }
.bar[data-provider="xai"] { background: var(--chart-violet); }
.bar[data-provider="deepseek"] { background: var(--chart-teal); }
.bar[data-provider="qwen-alibaba"] { background: var(--chart-brown); }
.bar-column:hover .bar, .bar-column:focus-visible .bar { filter: brightness(0.88); }
.bar-column.is-highlighted .bar { background: var(--success-text); }
.bar-column.is-highlighted .bar-value, .bar-column.is-highlighted .bar-rank, .bar-column.is-highlighted .bar-label, .bar-column.is-highlighted .bar-effort { color: var(--success-text); font-weight: var(--weight-semibold); }
.bar-rank { margin-top: var(--space-100); color: var(--text-subtlest); font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.bar-label { display: -webkit-box; width: 4.75rem; min-height: 2.5rem; max-height: 2.5rem; margin-top: var(--space-050); overflow: hidden; color: var(--text); font-size: 0.75rem; line-height: 1.25rem; text-align: center; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
.bar-effort { margin-top: var(--space-025); color: var(--text-subtlest); font-size: 0.6875rem; }
.chart-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-200); padding: var(--space-150) var(--space-300); color: var(--text-subtlest); font-size: 0.75rem; }
.chart-footer strong { color: var(--text-subtle); font-weight: var(--weight-medium); }
.chart-footer-hint { display: inline-flex; align-items: center; gap: var(--space-050); }
.scroll-icon { transform: rotate(90deg); }
.empty-chart { display: grid; min-height: 24rem; place-items: center; padding: var(--space-400); color: var(--text-subtlest); }

.details-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.35fr); gap: var(--space-300); margin-top: var(--space-400); padding: var(--space-300); }
.details-card.is-winner { border-color: var(--success-border); }
.details-main { min-width: 0; }
.details-kicker { margin-block-end: var(--space-100); color: var(--text-subtlest); font-size: 0.75rem; }
.details-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-100); }
.details-title h2 { margin-block-end: 0; }
.details-title .lozenge { color: var(--text-subtle); }
.details-meta { margin-block: var(--space-100) 0; color: var(--text-subtle); }
.details-value { align-self: start; padding-inline-start: var(--space-300); border-inline-start: var(--border-default) solid var(--border); text-align: end; }
.details-value small { display: block; margin-block-end: var(--space-050); color: var(--text-subtlest); font-size: 0.75rem; }
.details-value strong { color: var(--brand-pressed); font-size: 1.75rem; font-weight: var(--weight-bold); line-height: 2rem; }
.details-metrics { display: grid; grid-template-columns: repeat(4, 1fr); grid-column: 1 / -1; gap: var(--space-200); padding-top: var(--space-200); border-top: var(--border-default) solid var(--border); }
.details-metric { display: grid; gap: var(--space-050); }
.details-metric span { color: var(--text-subtlest); font-size: 0.75rem; }
.details-metric strong { color: var(--text); font-size: 0.875rem; font-weight: var(--weight-semibold); }
.details-metric small { color: var(--text-subtlest); font-size: 0.75rem; }
.winner-note { display: flex; align-items: flex-start; grid-column: 1 / -1; gap: var(--space-100); margin-top: calc(var(--space-100) * -1); padding: var(--space-150); border-radius: var(--radius-medium); background: var(--surface-success); color: var(--success-text); }
.winner-note svg { flex: 0 0 auto; margin-top: var(--space-025); }

.table-card { margin-top: var(--space-400); overflow: hidden; }
.table-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-300); padding: var(--space-300); }
.table-toolbar h2 { margin-block-end: var(--space-050); }
.table-toolbar p { margin-block-end: 0; color: var(--text-subtle); }
.filters { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-100); }
.filter-field { display: grid; gap: var(--space-050); min-width: 8.5rem; color: var(--text-subtle); font-size: 0.75rem; }
.filter-field:first-child { min-width: 15rem; }
.filter-input { min-height: 2.5rem; gap: var(--space-100); padding-inline: var(--space-100); border: var(--border-default) solid var(--border-input); border-radius: var(--radius-medium); background: var(--surface); color: var(--text); }
.filter-input:focus-within { border-color: var(--border-focused); }
.filter-input svg { flex: 0 0 auto; color: var(--text-subtlest); }
.filter-input input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.filter-input input::placeholder { color: var(--text-subtlest); }
.filter-field select { width: 100%; min-height: 2.5rem; padding: 0 var(--space-300) 0 var(--space-100); border: var(--border-default) solid var(--border-input); border-radius: var(--radius-medium); background: var(--surface); color: var(--text); }

.table-wrap { overflow-x: auto; border-top: var(--border-default) solid var(--border); }
table { width: 100%; min-width: 64rem; border-collapse: collapse; }
th { padding: var(--space-150) var(--space-200); border-bottom: var(--border-default) solid var(--border); background: var(--surface-sunken); color: var(--text-subtle); font-size: 0.75rem; font-weight: var(--weight-semibold); text-align: start; white-space: nowrap; }
td { padding: var(--space-150) var(--space-200); border-bottom: var(--border-default) solid var(--border); color: var(--text); font-size: 0.875rem; vertical-align: middle; }
tbody tr { cursor: pointer; transition: background-color var(--motion-short) var(--ease-out); }
tbody tr:hover { background: var(--surface-hovered); }
tbody tr.is-selected { background: var(--surface-selected); }
tbody tr.is-selected td:first-child { border-inline-start: var(--border-selected-width) solid var(--border-selected); }
tbody tr.is-selected .rank-cell, tbody tr.is-selected .value-cell { color: var(--brand-pressed); }
tbody tr.is-highlighted .model-cell strong { color: var(--success-text); }
.numeric { text-align: end; }
.rank-cell { color: var(--text-subtlest); font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.model-cell { display: grid; min-width: 15rem; gap: var(--space-025); }
.model-cell strong { font-size: 0.875rem; font-weight: var(--weight-semibold); }
.model-cell span { color: var(--text-subtlest); font-size: 0.75rem; }
.provider-cell { gap: var(--space-100); white-space: nowrap; }
.provider-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--chart-blue); }
.provider-dot[data-provider="anthropic"] { background: var(--chart-lime); }
.provider-dot[data-provider="z-ai"] { background: var(--chart-purple); }
.provider-dot[data-provider="moonshot-ai"] { background: var(--chart-orange); }
.provider-dot[data-provider="google"] { background: var(--chart-navy); }
.provider-dot[data-provider="xai"] { background: var(--chart-violet); }
.provider-dot[data-provider="deepseek"] { background: var(--chart-teal); }
.provider-dot[data-provider="qwen-alibaba"] { background: var(--chart-brown); }
.source-pill { display: inline-flex; align-items: center; min-height: 1.5rem; padding-inline: var(--space-100); border: var(--border-default) solid var(--border); border-radius: var(--radius-small); background: var(--surface-sunken); color: var(--text-subtle); font-size: 0.75rem; font-weight: var(--weight-medium); }
.source-pill.is-open { border-color: var(--success-border); background: var(--surface-success); color: var(--success-text); }
td.numeric strong { font-weight: var(--weight-semibold); }
.uncertainty { margin-inline-start: var(--space-050); color: var(--text-subtlest); font-size: 0.75rem; }
.cost-cell { font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.value-cell { display: inline-flex; min-width: 3.5rem; justify-content: center; padding: var(--space-050) var(--space-100); border: var(--border-default) solid var(--information-border); border-radius: var(--radius-small); color: var(--brand-pressed); font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; font-weight: var(--weight-semibold); }
.empty-table { padding: var(--space-500); color: var(--text-subtlest); text-align: center; }

.method-panel { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(18rem, 0.7fr); gap: var(--space-200); margin-top: var(--space-400); padding: var(--space-300); border: var(--border-default) solid var(--information-border); border-radius: var(--radius-large); background: var(--surface-selected); }
.method-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--radius-full); background: var(--brand); color: var(--text-inverse); }
.method-panel h2 { margin-block-end: var(--space-100); font-size: 1.25rem; }
.method-panel p { max-width: 44rem; margin-block-end: 0; color: var(--text); }
.formula { align-self: center; padding: var(--space-150); border: var(--border-default) solid var(--border); border-radius: var(--radius-medium); background: var(--surface); }
.formula code { display: block; color: var(--text-subtle); font-family: "Atlassian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.formula code + code { margin-top: var(--space-100); padding-top: var(--space-100); border-top: var(--border-default) solid var(--border); }

.empty-state { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-200); margin-top: var(--space-400); padding: var(--space-400); background: var(--surface-discovery); }
.empty-state-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--radius-large); background: var(--discovery-border); color: var(--discovery-text); }
.empty-state h1 { margin-block-end: var(--space-100); }
.empty-state p { max-width: 48rem; margin-block-end: var(--space-200); color: var(--text); }
.button-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-100); min-height: 2.5rem; padding: var(--space-075) var(--space-200); border: var(--border-default) solid var(--brand); border-radius: var(--radius-medium); background: var(--brand); color: var(--text-inverse); font-weight: var(--weight-medium); text-decoration: none; transition: background-color var(--motion-short) var(--ease-out), border-color var(--motion-short) var(--ease-out); }
.button-primary:hover { border-color: var(--brand-pressed); background: var(--brand-pressed); }

.warning-banner { display: flex; align-items: flex-start; gap: var(--space-100); margin-top: var(--space-300); padding: var(--space-150) var(--space-200); border: var(--border-default) solid var(--warning-border); border-radius: var(--radius-large); background: var(--surface-warning); color: var(--warning-text); }
.warning-banner svg { flex: 0 0 auto; margin-top: var(--space-025); }
.loading-state, .error-state { display: grid; min-height: 24rem; align-content: center; justify-items: center; gap: var(--space-100); color: var(--text-subtle); text-align: center; }
.loading-state strong, .error-state strong { color: var(--text); font-size: 1.25rem; font-weight: var(--weight-bold); }
.loading-state > span:last-child, .error-state p { margin: 0; color: var(--text-subtlest); }
.spinner { width: 1.5rem; height: 1.5rem; border: var(--border-selected-width) solid var(--surface-pressed); border-block-start-color: var(--brand); border-radius: var(--radius-full); animation: spin 600ms linear infinite; }
.error-state { min-height: 24rem; }
.error-state p { max-width: 40rem; }
.button-default { min-height: 2.5rem; padding: var(--space-075) var(--space-200); border: var(--border-default) solid var(--border); border-radius: var(--radius-medium); background: transparent; color: var(--text-subtle); font-weight: var(--weight-medium); cursor: pointer; }
.button-default:hover { background: var(--surface-hovered); }

.global-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-200); max-width: 96rem; margin: 0 auto; padding: var(--space-200) var(--space-400) var(--space-300); border-top: var(--border-default) solid var(--border); color: var(--text-subtlest); font-size: 0.75rem; }
.global-footer a { text-decoration: none; }
.global-footer a:hover { text-decoration: underline; }

@keyframes enter { from { opacity: 0; transform: translateY(var(--space-100)); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 72rem) {
  .main-content { padding-inline: var(--space-300); }
  .global-header-inner { padding-inline: var(--space-300); }
  .summary-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.7fr); }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .filters { justify-content: flex-start; }
}

@media (max-width: 56rem) {
  .global-header-inner { min-height: 3.5rem; }
  .header-context-title { display: none; }
  .workspace { display: block; min-height: 0; }
  .side-rail { border-inline-end: 0; border-bottom: var(--border-default) solid var(--border); }
  .side-rail-inner { position: static; display: flex; align-items: center; gap: var(--space-300); padding: var(--space-200) var(--space-300); }
  .side-rail-heading { flex: 0 0 auto; margin: 0; }
  .source-nav { display: flex; min-width: 0; overflow-x: auto; }
  .source-nav-item { flex: 0 0 auto; min-width: 13rem; }
  .source-nav-item.is-active::before { inset-block: auto; inset-inline: var(--space-100); bottom: calc(var(--space-050) * -1); width: auto; height: var(--border-selected-width); }
  .side-rail-note { display: none; }
  .main-content { padding-top: var(--space-400); }
  .page-header { flex-direction: column; }
  .page-header-side { justify-items: start; }
  .summary-grid { grid-template-columns: 1fr; }
  .details-card { grid-template-columns: 1fr; }
  .details-value { padding-inline-start: 0; padding-block-start: var(--space-200); border-inline-start: 0; border-block-start: var(--border-default) solid var(--border); text-align: start; }
  .section-header { flex-direction: column; }
  .section-meta { white-space: normal; }
}

@media (max-width: 36rem) {
  .global-header-inner { padding-inline: var(--space-200); }
  .header-meta { display: none; }
  .brand-name { font-size: 0.875rem; }
  .side-rail-inner { gap: var(--space-150); padding-inline: var(--space-200); }
  .side-rail-heading { display: none; }
  .source-nav-item { min-width: 12.5rem; }
  .main-content { padding: var(--space-300) var(--space-200) var(--space-800); }
  h1 { font-size: 1.75rem; line-height: 2rem; }
  .leader-card, .snapshot-panel, .section-header, .details-card, .table-toolbar, .method-panel, .empty-state { padding: var(--space-200); }
  .leader-primary { align-items: flex-start; flex-direction: column; gap: var(--space-200); }
  .leader-score { text-align: start; }
  .leader-metrics, .details-metrics { grid-template-columns: 1fr 1fr; gap: var(--space-150); }
  .chart-frame { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-050); padding: var(--space-200) var(--space-100); }
  .chart-grid { min-width: max(100%, calc(var(--bar-count) * 5rem)); }
  .bar-column { flex-basis: 4.5rem; min-width: 4.5rem; }
  .bar-label { width: 4.25rem; }
  .chart-footer { align-items: flex-start; flex-direction: column; padding-inline: var(--space-200); }
  .filters, .filter-field, .filter-field:first-child { width: 100%; min-width: 0; }
  .method-panel { grid-template-columns: 2rem minmax(0, 1fr); }
  .method-panel > div:nth-child(2) { min-width: 0; }
  .formula { grid-column: 1 / -1; }
  .empty-state { grid-template-columns: 1fr; }
  .global-footer { align-items: flex-start; flex-direction: column; padding-inline: var(--space-200); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}