/* AscendArena Design v0.1 — visual layer only. Data and rendering logic remain untouched. */
:root {
  --aa-canvas: #f7f8fa;
  --aa-surface: #ffffff;
  --aa-surface-soft: #f3f4f7;
  --aa-text: #17191f;
  --aa-muted: #60646f;
  --aa-muted-2: #8b909c;
  --aa-border: #e4e6eb;
  --aa-divider: #eceef2;
  --aa-primary: #2563eb;
  --aa-primary-hover: #1d4ed8;
  --aa-primary-soft: #eff6ff;
  --aa-positive: #15805d;
  --aa-negative: #c94751;
  --aa-warning: #a86b16;
  --aa-radius: 8px;
  --aa-content-max: 1440px;
  --aa-page-pad: 64px;
  --aa-space-1: 4px;
  --aa-space-2: 8px;
  --aa-space-3: 12px;
  --aa-space-4: 16px;
  --aa-space-5: 24px;
  --aa-space-6: 32px;
  --aa-space-7: 48px;
  --aa-space-8: 64px;
}

/* Apply these selectors to the existing shell without touching ARENA_RESULTS. */
body { background: var(--aa-canvas); color: var(--aa-text); font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
.shell { width: 100%; max-width: none; padding: 0 0 var(--aa-space-8); }
.topbar { width: 100%; min-height: 72px; padding: 0 max(16px, calc((100vw - var(--aa-content-max)) / 2)); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--aa-border); }
.topbar > * { max-width: var(--aa-content-max); }
.main-view { width: min(var(--aa-content-max), calc(100% - (var(--aa-page-pad) * 2))); margin: var(--aa-space-8) auto 0; gap: var(--aa-space-7); }
.panel { border: 1px solid var(--aa-border); border-radius: var(--aa-radius); background: var(--aa-surface); box-shadow: none; }
.panel::after { display: none; }
.panel-header { padding: var(--aa-space-5); border-bottom: 1px solid var(--aa-divider); }
.panel-title { color: var(--aa-text); }
.panel-subtitle, .crumb, .filter-label, .metric dt { color: var(--aa-muted); }
.toolbar { gap: var(--aa-space-3); padding: var(--aa-space-4) var(--aa-space-5); }
.filter-button, .ghost-button, .back-button, .icon-button { min-height: 40px; border-color: var(--aa-border); border-radius: var(--aa-radius); }
.filter-button:hover, .ghost-button:hover, .back-button:hover, .icon-button:hover { border-color: var(--aa-primary); background: var(--aa-primary-soft); box-shadow: none; }
.summary-row { gap: 0; padding: 0 var(--aa-space-5) var(--aa-space-5); background: var(--aa-surface); }
.metric { border: 0; border-right: 1px solid var(--aa-divider); border-radius: 0; background: transparent; padding: var(--aa-space-4) var(--aa-space-5); }
.metric:last-child { border-right: 0; }
.metric dd { color: var(--aa-text); }
.table-wrap, .mini-table-wrap { border-top-color: var(--aa-divider); }
table { font-size: 14px; }
thead th { height: 44px; background: var(--aa-surface-soft); color: var(--aa-muted); border-bottom-color: var(--aa-border); }
tbody td { height: 52px; border-bottom-color: var(--aa-divider); }
tbody tr:hover { background: var(--aa-primary-soft); }
.op-name, .diff-title, .tooltip-title { color: var(--aa-primary); }
.speedup-good, .line-add .line-text { color: var(--aa-positive); }
.speedup-bad, .line-remove .line-text { color: var(--aa-negative); }
.pill { border-color: var(--aa-border); color: var(--aa-muted); background: var(--aa-surface); }
.pill.danger { border-color: rgba(201,71,81,.35); color: var(--aa-negative); }
.tooltip { border-color: var(--aa-border); box-shadow: 0 16px 36px rgba(23,25,31,.14); }
.analytics-card, .case-field, .case-structured, .diff-pane, .json-view { border-color: var(--aa-border); }

@media (max-width: 1535px) { :root { --aa-page-pad: 48px; } }
@media (max-width: 1279px) { :root { --aa-page-pad: 24px; } }
@media (max-width: 767px) { :root { --aa-page-pad: 16px; } .main-view { margin-top: var(--aa-space-6); } .metric { border-right: 0; border-bottom: 1px solid var(--aa-divider); } }

/* Keep the identifying columns visible while wide tables are scrolled. */
.data-table .mini-sticky-col,
.data-table .index-col {
  position: sticky;
  z-index: 2;
  background: var(--aa-surface-soft);
}

.data-table tbody .mini-sticky-col,
.data-table tbody .index-col {
  background: var(--aa-surface);
}

.data-table .mini-sticky-col {
  left: 0;
  min-width: 190px;
  box-shadow: 1px 0 0 var(--aa-border);
}

.data-table .index-col {
  left: 0;
  width: 52px;
  min-width: 52px;
  text-align: center;
  box-shadow: 1px 0 0 var(--aa-border);
}

#operatorTable .index-col + th,
#operatorTable .index-col + td {
  position: sticky;
  left: 52px;
  z-index: 2;
  background: var(--aa-surface-soft);
  box-shadow: 1px 0 0 var(--aa-border);
}

#operatorTable tbody .index-col + td {
  background: var(--aa-surface);
}

.detail-section-head,
.diff-file-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.detail-section-head h3 {
  margin-bottom: 6px;
}

.detail-section-head .control {
  width: min(340px, 100%);
}

.detail-diff-panel {
  margin-top: 24px;
}

.diff-file-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;
}

.diff-file-actions .btn {
  height: 36px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diff-loading-state {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 24px;
  border: 1px dashed var(--aa-border);
  border-radius: 8px;
  color: var(--aa-muted);
  font-size: 13px;
}

.diff-loading-state strong {
  color: var(--aa-text);
}

.diff-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.diff-pane {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--aa-border);
  border-radius: 8px;
}

.diff-pane-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--aa-border);
  background: var(--aa-surface-soft);
  color: var(--aa-muted);
  font: 12px/1.4 SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diff-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 26px;
  font: 12px/1.6 SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff-line .line-no {
  padding: 4px 8px;
  color: var(--aa-muted-2);
  text-align: right;
  user-select: none;
}

.diff-line .line-text {
  padding: 4px 10px;
}

.diff-line.line-add {
  background: var(--aa-positive-soft);
  color: var(--aa-positive);
}

.diff-line.line-remove {
  background: #fdeef0;
  color: var(--aa-negative);
}

@media (max-width: 800px) {
  .detail-section-head,
  .diff-panes {
    grid-template-columns: 1fr;
    display: grid;
  }

  .detail-section-head .control {
    width: 100%;
  }
}

/* Benchmark comparison and inspection. */
html { scrollbar-gutter: stable; }
.site-nav { width: 100%; }
#ranking .ranking-row { grid-template-columns: 28px minmax(240px, 320px) minmax(80px, 1fr) 72px; min-height: 48px; }
#ranking .ranking-label { display: grid; gap: 4px; white-space: normal; overflow: visible; }
#ranking .ranking-operator { overflow-wrap: anywhere; }
#ranking .ranking-method { color: var(--aa-muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
#distribution { display: block; overflow: auto; max-width: 100%; }
#distribution .data-table th, #distribution .data-table td { text-align: center; }
#distribution .data-table { min-width: 840px; }
#distribution .data-table tbody tr { cursor: default; }
#metrics .metric { min-width: 0; }
#metrics .metric:last-child .metric-value { font-size: 20px; overflow-wrap: anywhere; }
#operators { scroll-margin-top: 92px; }
#operators .operator-toolbar { padding: 0; align-items: end; gap: 12px; }
#operators .operator-toolbar label { display: grid; gap: 8px; flex: 1 1 190px; min-width: 0; color: var(--aa-muted); font-size: 12px; font-weight: 600; }
#operators .control { width: 100%; min-width: 0; height: 44px; font-weight: 400; }
#operators .btn { height: 44px; }
#sortDirection:disabled { opacity: .5; cursor: default; }
#operatorHelp { color: var(--aa-muted); font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
#operatorViewport { overflow: auto; position: relative; overscroll-behavior: contain; scrollbar-gutter: stable; }
#operatorTable { border-collapse: separate; border-spacing: 0; }
#operatorTable th { height: 64px; position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--aa-border); }
#operatorTable td { height: 52px; }
#operatorTable .index-col { width: 52px; min-width: 52px; max-width: 52px; padding: 0; }
#operatorTable .method-cell { width: 260px; min-width: 260px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#operatorTable thead .index-col, #operatorTable thead .index-col + th { z-index: 4; }
#operatorTable tbody tr.selected td { background: var(--aa-primary-soft); }
#operatorTable tbody tr:hover td { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
#operatorTable .num { text-align: right; }
#operatorTable .index-col { text-align: center; }
#operatorTable .sort-heading { display: grid; gap: 4px; min-height: 44px; width: 100%; padding: 6px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: right; cursor: pointer; }
#operatorTable .sort-heading:hover, #operatorTable th[aria-sort="descending"], #operatorTable th[aria-sort="ascending"] { color: var(--aa-primary-hover); background: var(--aa-primary-soft); }
#operatorTable .attempt-count { color: var(--aa-muted); font-size: 12px; font-weight: 400; }
#operators .table-footer { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--aa-muted); font-size: 12px; }
#attemptChart { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; overflow: visible; min-width: 0; min-height: 0; margin-inline: 0; padding-inline: 0; }
#attemptChart .attempt-plot { min-width: 0; overflow-x: auto; align-self: center; }
#attemptChart svg { width: 100%; min-width: 540px; height: auto; overflow: hidden; }
#attemptChart .chart-label { font-size: 12px; }
#attemptChart .attempt-crosshair { stroke: var(--aa-muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
#attemptChart .attempt-marker { stroke: white; stroke-width: 2; }
#attemptHitArea { cursor: crosshair; }
#attemptChart .attempt-inspector { padding: 16px; background: var(--aa-surface-soft); border: 1px solid var(--aa-border); border-radius: 8px; font-size: 12px; }
#attemptChart .attempt-inspector-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--aa-border); }
#attemptChart .attempt-inspector-head > span { color: var(--aa-muted); }
#attemptChart .attempt-value-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 24px; gap: 8px; align-items: center; min-height: 28px; }
#attemptChart .attempt-value-row i { width: 8px; height: 8px; border-radius: 2px; }
#attemptChart .attempt-value-row span { overflow-wrap: anywhere; }
#attemptChart .attempt-value-row strong { text-align: right; font-variant-numeric: tabular-nums; }
#attemptChart .attempt-control { grid-column: 1 / -1; display: grid; grid-template-columns: 130px minmax(100px, 1fr); gap: 4px 20px; align-items: center; font-size: 13px; }
#attemptRange { width: 100%; min-height: 44px; margin: 0; accent-color: var(--aa-primary-hover); cursor: pointer; }
#attemptOutput { font-weight: 700; font-variant-numeric: tabular-nums; }
#attemptHint { grid-column: 1 / -1; color: var(--aa-muted); font-size: 12px; }
#operators :focus-visible, #attemptChart :focus-visible { outline: 2px solid var(--aa-primary-hover); outline-offset: 2px; }
@media (max-width: 1000px) {
  #attemptChart { grid-template-columns: minmax(0, 1fr); }
  #attemptChart .attempt-inspector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  #attemptChart .attempt-inspector-head { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #ranking .ranking-row { grid-template-columns: 24px minmax(0, 1fr) 64px; gap: 8px; }
  #ranking .ranking-track { grid-column: 2 / -1; grid-row: 2; height: 6px; }
  #ranking .ranking-value { grid-column: 3; grid-row: 1; }
  #operatorTable .method-cell { width: 160px; min-width: 160px; max-width: 160px; }
  #attemptChart .attempt-inspector { grid-template-columns: minmax(0, 1fr); }
  #attemptChart .attempt-control { grid-template-columns: 1fr; }
  #operators .operator-toolbar label { flex-basis: 100%; }
  #operators .control { font-size: 16px; }
  #operators .table-footer { flex-wrap: wrap; }
  .page .section-head { align-items: start; flex-wrap: wrap; }
  .page .panel { padding: 16px; min-width: 0; }
  .page .analytics { min-width: 0; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #ranking *, #operatorTable * { transition: none; }
}

/* Institution footer. */
.institution-footer { border-top: 1px solid var(--aa-border); background: var(--aa-surface); padding: 32px max(24px, calc((100% - 1440px) / 2)) 40px; }
.footer-top { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--aa-border); border-radius: 50%; background: var(--aa-surface); cursor: pointer; box-shadow: 0 2px 6px #1f1f1d0a; transition: background .15s, border-color .15s; }
.footer-top:hover { background: var(--aa-primary-soft); border-color: var(--aa-primary); }
.footer-top:focus-visible { outline: 2px solid var(--aa-primary-hover); outline-offset: 4px; }
.method-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 6px 9px; border: 1px solid var(--aa-border); border-radius: 4px; background: #fff; color: var(--aa-text); box-shadow: 0 2px 6px #1f1f1d0d; font: 12px/1.45 system-ui, sans-serif; overflow-wrap: anywhere; pointer-events: none; }
[data-explanation]:not(button) { cursor: help; }
[data-explanation]:focus-visible { outline: 2px solid var(--aa-primary-hover); outline-offset: 3px; }
.abbreviations { margin: 0 0 16px; color: var(--aa-muted); font-size: 13px; }
.abbreviations summary { cursor: pointer; width: fit-content; padding: 10px 0; min-height: 44px; }
.abbreviations > div { max-width: 560px; padding: 4px 16px; border-left: 2px solid var(--aa-border); line-height: 1.6; }
.abbreviations dl { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px 16px; }
.abbreviations dt { font-weight: 600; color: var(--aa-text); }
.abbreviations dd { margin: 0; }
.institution-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.institution { display: grid; align-content: start; justify-items: center; gap: 16px; text-align: center; color: var(--aa-muted); font-size: 12px; line-height: 1.6; }
.institution-logo { display: flex; justify-content: center; align-items: center; height: 88px; width: 100%; }
.institution-logo img { display: block; object-fit: contain; max-width: 100%; width: 200px; height: 72px; }
.institution-footer a:focus-visible { outline: 2px solid var(--aa-primary-hover); outline-offset: 4px; }
#analytics { scroll-margin-top: 92px; }
@media (max-width: 800px) { .institution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (max-width: 480px) { .institution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .institution-footer { padding: 24px 16px 32px; } .institution-logo img { height: 64px; } }