/* Reset & base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d27;
  --bg-tertiary: #242836;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #808690;
  --border: #2d3140;
  --accent: #6c9eff;
  --accent-dim: rgba(108, 158, 255, 0.15);
  --radius: 8px;
  --radius-lg: 12px;
}

html {
  font-size: clamp(1rem, 0.85rem + 0.25vw, 1.25rem);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* Header */
header {
  text-align: center;
  padding: 2.5rem 1.5rem 1.5rem;
}

header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 0.4rem;
}

/* Main container */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

/* Controls row */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Date range dropdown */
.date-range-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f6368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
  transition: all 0.2s ease;
}

.date-range-select:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.date-range-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Mode toggle */
.mode-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.mode-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.mode-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Filter pills (used for both benchmark tabs and lab tabs) */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.filter-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-secondary);
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.filter-pill.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Chart container */
.chart-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  height: 29.375rem;
  display: flex;
  flex-direction: column;
}

/* Pace of Progress: container hosts both the line chart and a bar chart, so
   the fixed height becomes too cramped. Give each canvas an explicit height
   instead and let the container expand. */
.chart-container.pace-mode {
  height: auto;
}
.chart-container.pace-mode .chart-canvas-wrapper {
  flex: none;
  height: 18rem;
}

.chart-canvas-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Pace of Progress: bar chart rendered beneath the headline line chart.
   Hidden in other modes (via [hidden] attribute toggled in app.js). */
.pace-bar-wrapper {
  flex-shrink: 0;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pace-bar-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pace-bar-wrapper canvas {
  max-height: 220px;
}

/* Chart citation line — info icon on the left, source text follows. Right side
   reserved for the absolutely-positioned .chart-actions cluster. */
.chart-citation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding-top: 0.75rem;
  padding-right: 90px;
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Custom chart legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.2rem 1rem;
  padding-bottom: 1rem;
  padding-right: 70px;
}

.chart-legend:empty {
  display: none;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.legend-item:hover {
  color: var(--text-primary);
}

.legend-item.hidden {
  opacity: 0.35;
  text-decoration: line-through;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-divider {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--border);
  margin: 0.35rem 0;
}

.legend-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.15rem 0.25rem;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.legend-item.inactive {
  opacity: 0.55;
}

.legend-item.inactive:hover {
  opacity: 1;
}

/* ─── Capability-grouped legend (frontier mode desktop only) ─── */

.chart-legend.frontier-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.1rem 0.6rem;
  align-items: start;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0.6rem;
  /* Chart-container has 1.5rem top padding; legend itself adds 0.6rem to its
     bottom. Pull legend up so the visual space above and below the legend
     within the container is roughly equal (rather than 24px top vs 10px bottom). */
  margin-top: -0.45rem;
}

.legend-column {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0; /* allows ellipsis instead of overflow on narrow columns */
}

.legend-cap-header {
  display: flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Default colour for the header. Each rendered header span receives an inline
     `color` override from renderCapabilityHeader — a lightened version of its
     capability colour. The CSS fallback only applies if the JS override fails. */
  color: var(--text-muted);
  user-select: none;
  padding: 0 0.25rem;
  min-width: 0;
}

/* Wrap the header text in a span so ellipsis works inside the flex layout */
.legend-cap-header-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.legend-defeated-link {
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
}

.legend-defeated-link:hover {
  color: var(--text-secondary);
}

.legend-defeated-link.isolated {
  color: var(--text-primary);
  font-weight: 600;
}

/* Within the capability-grouped grid, only the capability header carries the
   coloured dot; the active benchmark name sits below as plain text. */
.chart-legend.frontier-grid .legend-item .legend-dot {
  display: none;
}

/* In the grid layout, individual benchmark buttons need to truncate gracefully */
.chart-legend.frontier-grid .legend-item {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stacked tooltip rows for "N defeated" hover */
.inactive-tooltip-row + .inactive-tooltip-row {
  border-top: 1px solid var(--border);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}

/* Status badges for info area */
.status-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 400;
  padding: 0.12rem 0.45rem;
  border-radius: 100px;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.status-badge.deprecated {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.status-badge.saturated {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

/* Chart export buttons — pinned to the bottom-right of the chart-container so
   they overlay the right end of the citation row. The citation row reserves
   right-padding (set on .chart-citation) so the source text doesn't slide
   underneath. */
.chart-actions {
  position: absolute;
  bottom: 0.6rem;
  right: 0.75rem;
  display: flex;
  gap: 0.35rem;
  z-index: 10;
}

/* Restore the default `hidden` attribute behaviour for elements whose
   `display` is set explicitly (which otherwise overrides display:none). */
.chart-actions[hidden],
.filter-pills[hidden],
.chart-legend[hidden] {
  display: none;
}

.chart-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 0.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.chart-action-btn svg {
  flex-shrink: 0;
}

/* Info card */
.info-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

.info-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.category-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 400;
  background: var(--accent-dim);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.info-card p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.info-card a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.825rem;
  font-weight: 500;
}

.info-card a:hover {
  text-decoration: underline;
}

/* Methodology intro */
.methodology-intro {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.methodology-intro p {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

/* Expandable benchmark list (frontier mode) */
.benchmark-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.benchmark-item {
  border-bottom: 1px solid var(--border);
}

.benchmark-item:last-child {
  border-bottom: none;
}

.benchmark-item-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 0.6rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
  text-align: left;
}

.benchmark-item-header:hover {
  color: var(--accent);
}

.benchmark-item-header .pill-dot {
  flex-shrink: 0;
}

.benchmark-item-name {
  flex: 1;
  min-width: 0;
}

.benchmark-item-header .category-badge {
  margin-left: 0.35rem;
  margin-right: 0.5rem;
}

.expand-icon {
  color: var(--text-muted);
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  font-weight: 300;
}

.benchmark-item-detail {
  padding: 0 0 0.75rem 1rem;
}

.benchmark-item-detail p {
  margin-bottom: 0.35rem;
}

/* Analysis section */
.analysis-section {
  margin-bottom: 1.25rem;
}

.analysis-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
}

/* Copy button — top-right of card */
.analysis-card > .copy-icon-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* Callout stats list */
.callout-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  list-style: none;
  padding: 0;
}

.callout-line {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.callout-line::before {
  content: "\2022";
  color: var(--text-muted);
  flex-shrink: 0;
}

.callout-obj {
  font-weight: 600;
  color: var(--text-primary);
}

.callout-num {
  font-weight: 700;
  color: var(--accent);
}

.analysis-headline {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.analysis-commentary {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.analysis-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.copy-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.copy-icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-tertiary);
}

.analysis-loading-inline {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.analysis-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 1.5rem 0;
}

/* Analysis disclaimer */
.analysis-disclaimer {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Chart loading / error / empty states */
.chart-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

.chart-status.error {
  color: #ef4444;
}

.chart-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg-secondary);
}

.retry-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.retry-btn:hover {
  opacity: 0.85;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Cost callout styling */
.callout-line .cost-range {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Inactive benchmark tooltip */
.inactive-tooltip {
  display: none;
  position: fixed;
  z-index: 1000;
  background: #1a1d27;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  max-width: 300px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.inactive-tooltip-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.inactive-tooltip-reason {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.inactive-tooltip-score {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Footer */
footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.footer-social {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}

.footer-social:hover {
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
  header { padding: 1.5rem 1rem 1rem; }
  header h1 { font-size: 1.35rem; }
  main { padding: 0 1rem 1.5rem; }
  .controls { flex-direction: column; gap: 0.5rem; }
  .date-range-select { width: 100%; }
  .chart-container { height: 28rem; padding: 1rem; }
  .chart-container.pace-mode { height: auto; }
  .chart-container.pace-mode .chart-canvas-wrapper { height: 16rem; }
  .pace-bar-wrapper canvas { max-height: 200px; }
  .filter-pill { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
  .filter-pills { gap: 0.35rem; }
  .analysis-card { padding: 0.75rem 1rem; }

  /* Legend: tighter spacing, less clearance for action buttons */
  .chart-legend { gap: 0.15rem 0.5rem; padding-right: 40px; padding-bottom: 0.5rem; }

  /* Mobile frontier uses .frontier-mobile (rendered by renderFrontierMobile) —
     a wrapping row of capability pills. Race/cost modes still fall through
     to the flat layout. If the desktop grid class somehow survives a resize,
     strip it back to a flat row as a belt-and-suspenders defence. */
  .chart-legend.frontier-grid {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
  }
  .legend-cap-header,
  .legend-defeated-link { display: none; }

  .chart-legend.frontier-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    padding-right: 40px;
    padding-bottom: 0.5rem;
  }

  .legend-cap-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.3rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    /* .legend-cap-name carries the lightened capability colour (set inline). */
  }

  .legend-cap-pill .legend-bench-name {
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-muted, #808690);
  }

  .legend-cap-pill.hidden {
    opacity: 0.4;
    text-decoration: line-through;
  }

  /* Smaller action buttons to free legend space */
  .chart-action-btn { padding: 0.2rem; }
  .chart-action-btn svg { width: 14px; height: 14px; }

  /* Touch target improvements */
  .mode-btn { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
  .legend-item { padding: 0.3rem 0.35rem; }
  .benchmark-item-header { padding: 0.75rem 0; }
  .copy-icon-btn { padding: 0.4rem; }

  /* Typography: bump smallest sizes for readability */
  .status-badge { font-size: 0.7rem; }

  /* Overflow protection */
  .chart-citation { flex-wrap: wrap; }
  footer { flex-wrap: wrap; }
  .benchmark-item-detail { padding-left: 0.5rem; }
}