/* Palette and type follow matcalc.ai (Just the Docs, light scheme). */
:root {
  --mc-link: #7253ed;
  --mc-link-hover: #5e41d0;
  --mc-link-soft: #f1eefd;
  --mc-heading: #27262b;
  --mc-text: #5c5962;
  --mc-muted: #6e6b75;
  --mc-border: #eeebee;
  --mc-border-strong: #d4d0d8;
  --mc-panel: #f5f6fa;
  --mc-surface: #fff;
  --mc-warning-ink: #674509;
  --mc-warning-bg: #fff8e1;
  --mc-warning-border: #f7d12e;
  --mc-radius: 4px;
  --mc-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mc-mono: "SFMono-Regular", Menlo, Consolas, Monaco, "Liberation Mono", monospace;

  --bs-primary: #7253ed;
  --bs-primary-rgb: 114, 83, 237;
  --bs-link-color: #7253ed;
  --bs-link-color-rgb: 114, 83, 237;
  --bs-link-hover-color: #5e41d0;
  --bs-link-hover-color-rgb: 94, 65, 208;
  --bs-body-color: #5c5962;
  --bs-body-font-family: var(--mc-font);
  --bs-border-color: #eeebee;
  --bs-focus-ring-color: rgba(114, 83, 237, 0.25);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--mc-surface);
  color: var(--mc-text);
  font-family: var(--mc-font);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  color: var(--mc-heading);
}

a {
  color: var(--mc-link);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--mc-link-hover);
}

:focus-visible {
  outline: 2px solid var(--mc-link);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  color: #fff;
  background: var(--mc-link);
  border-radius: var(--mc-radius);
}

.skip-link:focus {
  top: 0.5rem;
  color: #fff;
}

/* Header: site title on the left, navigation and small aux links on the right. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  min-height: 60px;
  padding: 0.5rem max(1rem, calc((100% - 1320px) / 2));
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  color: var(--mc-heading);
  text-decoration: none;
}

.brand-link:hover {
  color: var(--mc-heading);
}

.brand-link img {
  border-radius: 6px;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
}

.site-nav,
.aux-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  font-size: 0.875rem;
}

.site-nav a,
.aux-nav a {
  color: var(--mc-link);
  text-decoration: none;
}

.site-nav a:hover,
.aux-nav a:hover {
  color: var(--mc-link-hover);
  text-decoration: underline;
}

.page-content {
  width: 100%;
  max-width: 1384px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
}

.dev-banner {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  color: var(--mc-warning-ink);
  background: var(--mc-warning-bg);
  border-left: 4px solid var(--mc-warning-border);
  border-radius: var(--mc-radius);
  font-size: 0.875rem;
}

.page-heading {
  margin: 0.5rem 0 0.75rem;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.25;
}

.lead-copy {
  max-width: 76ch;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1.25rem 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--mc-border);
  border-bottom: 1px solid var(--mc-border);
}

.stat-item {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  color: var(--mc-muted);
  font-size: 0.875rem;
}

.stat-item strong {
  color: var(--mc-heading);
  font-size: 1rem;
  font-weight: 600;
}

.workspace,
.benchmark-workspace,
.comparison-workspace,
.task-sidebar,
.chart-panel,
.table-panel,
.control-field,
.model-controls,
.metadata-details,
.model-details,
.method-section {
  min-width: 0;
}

.benchmark-workspace {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: start;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.task-sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-right: 1rem;
  border-right: 1px solid var(--mc-border);
}

.task-nav-group + .task-nav-group {
  margin-top: 1.25rem;
}

.task-nav-group h3 {
  margin: 0 0 0.375rem;
  color: var(--mc-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.task-link {
  display: block;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.625rem;
  color: var(--mc-text);
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--mc-radius) var(--mc-radius) 0;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.task-link:hover {
  color: var(--mc-link-hover);
  background: var(--mc-panel);
}

.task-link.active {
  color: var(--mc-link-hover);
  background: var(--mc-link-soft);
  border-left-color: var(--mc-link);
  font-weight: 600;
}

.mobile-task-picker {
  display: none;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--mc-border);
  --bs-nav-tabs-link-active-color: var(--mc-heading);
  --bs-nav-tabs-link-active-border-color: var(--mc-border) var(--mc-border) var(--bs-body-bg);
  --bs-nav-tabs-link-hover-border-color: var(--mc-border) var(--mc-border) var(--mc-border);
}

.nav-tabs .nav-link {
  font-weight: 500;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 1.25rem 0;
}

.control-field {
  flex: 1 1 15rem;
}

.control-field label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--mc-heading);
  font-size: 0.875rem;
  font-weight: 600;
}

.form-select,
.form-control {
  min-width: 0;
  min-height: 2.25rem;
  color: var(--mc-heading);
  border-color: var(--mc-border-strong);
}

.form-select:focus,
.form-control:focus {
  border-color: #b9a9f6;
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.comparison-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 1rem;
  margin: 1.25rem 0;
}

.model-controls {
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--mc-border);
  border-bottom: 1px solid var(--mc-border);
}

.model-controls .control-field {
  margin-top: 0.75rem;
}

.model-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0;
}

.model-picker .form-check {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.375rem;
  border-radius: var(--mc-radius);
}

.model-picker .form-check:hover,
.model-picker .form-check:focus-within {
  background: var(--mc-panel);
}

.model-picker .form-check-input {
  float: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  cursor: pointer;
}

.model-picker .form-check-input:checked {
  background-color: var(--mc-link);
  border-color: var(--mc-link);
}

.model-picker .form-check-label {
  min-height: 1.5rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.selection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.selection-actions button {
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

.context-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0 1rem;
  color: var(--mc-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.context-summary > * {
  min-width: 0;
}

.btn-primary {
  --bs-btn-bg: #7253ed;
  --bs-btn-border-color: #7253ed;
  --bs-btn-hover-bg: #5e41d0;
  --bs-btn-hover-border-color: #5e41d0;
  --bs-btn-active-bg: #5739ce;
  --bs-btn-active-border-color: #5739ce;
  --bs-btn-focus-shadow-rgb: 114, 83, 237;
}

.chart-panel,
.table-panel {
  margin-bottom: 1.25rem;
  padding: 1.25rem 0;
  background: var(--mc-surface);
  border-top: 1px solid var(--mc-border);
}

.chart-panel .dash-graph,
.chart-panel .js-plotly-plot {
  min-width: 0;
  max-width: 100%;
}

.table-panel > summary,
.model-controls > summary,
.metadata-details > summary,
.model-details > summary {
  min-height: 1.5rem;
  color: var(--mc-heading);
  font-weight: 500;
  cursor: pointer;
}

.metadata-details,
.model-details {
  margin-bottom: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--mc-border);
}

.metadata-details[open] > summary,
.model-details[open] > summary,
.model-controls[open] > summary {
  margin-bottom: 0.75rem;
}

.metadata-details .table-panel,
.model-details .table-panel {
  margin: 0;
  padding: 0.75rem 0 0;
  border: 0;
}

.section-heading {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

.muted,
.table-help,
.source-note {
  color: var(--mc-muted);
}

.table-help,
.source-note {
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.table-help {
  margin-bottom: 1rem;
}

.source-note {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.dash-table-container {
  max-width: 100%;
}

.dash-table-container .dash-spreadsheet-container {
  overflow-x: auto;
}

.compact-table .dash-spreadsheet-container .dash-spreadsheet-inner [data-dash-column="model"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 9rem;
  max-width: 16rem;
  background: var(--mc-surface);
  box-shadow: 1px 0 0 var(--mc-border-strong);
}

.compact-table .dash-spreadsheet-container .dash-spreadsheet-inner th[data-dash-column="model"] {
  z-index: 2;
  background: var(--mc-panel);
}

.compact-table [data-dash-column="model"] .dash-cell-value {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* DataTable injects a monospace rule with the same selector after this sheet; table.cell-table outranks it. */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table.cell-table {
  font-family: var(--mc-font);
  font-variant-numeric: tabular-nums;
  --accent: var(--mc-link);
  --selected-background: var(--mc-link-soft);
  --selected-color: var(--mc-link-hover);
  --border: var(--mc-border);
}

.dash-table-container input[type="checkbox"],
.dash-table-container input[type="radio"] {
  accent-color: var(--mc-link);
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.legend-key {
  display: inline-block;
  margin-right: 0.375rem;
  color: var(--mc-heading);
  border-bottom: 2px solid #23734c;
  font-weight: 600;
}

.form-check-input:checked {
  background-color: var(--mc-link);
  border-color: var(--mc-link);
}

.form-check-input:focus {
  border-color: #b9a9f6;
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b9a9f6'/%3e%3c/svg%3e");
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  padding: 1rem max(1rem, calc((100% - 1320px) / 2));
  color: var(--mc-muted);
  background: var(--mc-panel);
  border-top: 1px solid var(--mc-border);
  font-size: 0.8125rem;
}

.method-header {
  margin-bottom: 1.75rem;
}

.back-link {
  font-size: 0.875rem;
  font-weight: 600;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.method-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
}

.method-section p:last-child {
  margin-bottom: 0;
}

.task-catalog {
  border-top: 1px solid var(--mc-border);
}

.task-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--mc-border);
}

.task-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.task-row h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.task-row dl,
.task-row dd:last-child,
.method-definitions {
  margin-bottom: 0;
}

.task-row dt,
.method-definitions dt {
  color: var(--mc-heading);
  font-weight: 600;
}

.task-row dd {
  font-size: 0.875rem;
}

.task-row dl > div + div {
  margin-top: 0.75rem;
}

.method-definitions dt:not(:first-child) {
  margin-top: 1rem;
}

.method-definitions dd {
  margin-top: 0.25rem;
}

.method-list {
  padding-left: 1.25rem;
}

.method-list li + li {
  margin-top: 0.5rem;
}

/* Leaderboard comparison chart controls. */
.property-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.property-label {
  color: var(--mc-heading);
  font-weight: 500;
}

.plot-properties {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.swatch-lowest,
.swatch-other {
  font-weight: 600;
}

.swatch-lowest {
  color: #1c5cab;
}

.swatch-other {
  color: var(--mc-muted);
}

.tab-body {
  padding-top: 1rem;
}

.detail-heading {
  margin: 0;
  color: var(--mc-heading);
  font-size: 1rem;
  font-weight: 500;
}


@media (max-width: 1024px) {
  .page-content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .benchmark-workspace {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .page-content {
    padding: 1rem;
  }

  .page-heading {
    font-size: 1.75rem;
  }

  .benchmark-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .task-sidebar {
    display: none;
  }

  .mobile-task-picker {
    display: block;
    margin-bottom: 1rem;
  }

  .method-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .task-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .chart-panel,
  .table-panel {
    padding: 1rem 0;
  }

  .method-section {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .comparison-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .compact-table .dash-spreadsheet-container .dash-spreadsheet-inner [data-dash-column="model"] {
    min-width: 8rem;
    max-width: 9rem;
  }
}

@media (max-width: 400px) {
  .site-nav,
  .aux-nav {
    gap: 0.25rem 1rem;
  }

  .stats-strip {
    gap: 0.5rem 1rem;
  }

  .dev-banner {
    padding: 0.75rem;
  }

  .method-section .btn {
    max-width: 100%;
    white-space: normal;
  }
}

/* Leaderboard grid: AG Grid theme parameters set from the matcalc.ai palette. */
.mc-grid {
  --ag-font-family: var(--mc-font);
  --ag-font-size: 13px;
  --ag-cell-horizontal-padding: 6px;
  --ag-header-cell-horizontal-padding: 4px;
  --ag-foreground-color: var(--mc-heading);
  --ag-header-background-color: var(--mc-panel);
  --ag-header-text-color: var(--mc-heading);
  --ag-header-font-weight: 600;
  --ag-border-color: var(--mc-border-strong);
  --ag-row-border-color: var(--mc-border);
  --ag-accent-color: var(--mc-link);
  --ag-row-hover-color: rgba(114, 83, 237, 0.06);
  --ag-selected-row-background-color: transparent;
  --ag-wrapper-border-radius: var(--mc-radius);
  font-variant-numeric: tabular-nums;
}

.mc-grid .mc-header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.25rem;
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-align: right;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Narrow metric columns: labels may break anywhere rather than overflow into the next column. */
.mc-grid .mc-header-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mc-grid .mc-group-header {
  width: 100%;
  text-align: center;
}

/* Task-group headers (Equilibrium, Near-equilibrium, ...) are centred over their columns, like the metric groups. */
.mc-grid .ag-header-group-cell-label {
  justify-content: center;
}

.mc-grid .mc-note {
  color: var(--mc-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Takes space only when the column is sorted. */
.mc-grid .mc-sort {
  color: var(--mc-link);
  font-size: 0.625rem;
}

.mc-grid .mc-sort:empty {
  display: none;
}

.mc-grid .agGrid-Markdown p {
  margin: 0;
}

.mc-grid .agGrid-Markdown a {
  color: var(--mc-link);
  font-weight: 600;
  text-decoration: none;
}

.mc-grid .agGrid-Markdown a:hover {
  color: var(--mc-link-hover);
  text-decoration: underline;
}

.model-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
}

.model-facts dt:not(:first-child),
.model-facts dd {
  margin: 0;
}

/* Reference dataset explorer. */
.dataset-plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.periodic-scroll { overflow-x: auto; }
#dataset-periodic { min-width: 760px; }
.dataset-count-table { width: 100%; max-width: 36rem; border-collapse: collapse; }
.dataset-count-table th, .dataset-count-table td { padding: 0.4rem 0.8rem; text-align: right; border-bottom: 1px solid var(--mc-border); }
.dataset-count-table th:first-child, .dataset-count-table td:first-child { text-align: left; }
#dataset-source { overflow-wrap: anywhere; margin-top: 1rem; }
@media (max-width: 760px) { .dataset-plots { grid-template-columns: 1fr; } }