/* Charts on the project page: offline-benchmark bar charts and the scaling scatter plot.
   Neutrals come from the tokens in index.css; data colors are set by the scripts. */

/* ---- shared chart text + marks (JS-generated SVG uses classes, not presentation attributes) ---- */
.bar-chart-wrap svg,
.chart-plot-wrap svg {
  font-family: var(--font-display);
  font-size: var(--fs-1);
}

.bar-chart-wrap svg text,
.chart-plot-wrap svg text {
  font-size: var(--fs-1);
}

/* ---- bar charts ---- */
.bar-section .bar-hint {
  margin: var(--space-3) 0 var(--space-5);
  text-align: center;
}

.bar-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-6) var(--space-5);
}

.bar-chart {
  margin: 0;
  min-width: 0;
  text-align: left;
}

.bar-chart-title {
  margin-bottom: var(--space-3);
  line-height: var(--lh-ui);
}

.bar-chart-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
}

.bar-chart-metric {
  display: block;
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.bar-chart-wrap {
  position: relative;
  width: 100%;
}

.bar-chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.bar-axis {
  stroke: var(--chart-axis);
  stroke-width: 1;
}

.bar-name {
  fill: var(--chart-label);
  font-weight: 500;
}

.bar-name.is-off {
  fill: var(--text-muted);
  text-decoration: line-through;
}

.bar-value {
  fill: var(--chart-value);
  font-weight: 700;
}

.bench-bar.is-star {
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* ---- legend chips (bar charts + scaling plot) ---- */
.bar-legend {
  justify-content: center;
}

.bar-section .legend-chip,
.chart-card .legend-chip {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

.bar-section .legend-chips,
.chart-card .legend-chips {
  gap: var(--space-2);
}

/* neutral (baseline) chips: tokens, not literals */
.chart-card .legend-chip:not(.is-model) {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--ink);
}

.chart-card .legend-chip.is-model,
.bar-section .legend-chip.is-model {
  border: 0;
  border-radius: var(--radius-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

@media (hover: hover) {
  .chart-card .legend-chip:not(.is-model):hover {
    background: var(--surface-hover);
  }

  .bar-section .legend-chip.is-model:hover,
  .chart-card .legend-chip.is-model:hover {
    filter: brightness(1.1);
  }
}

.bar-section .legend-chip:active,
.chart-card .legend-chip:active {
  transform: scale(0.97);
}

.bar-section .legend-chip.is-model.is-off,
.chart-card .legend-chip.is-model.is-off {
  filter: grayscale(0.7);
  opacity: 0.55;
}

.chart-card .legend-chip:not(.is-model).is-off {
  opacity: 0.6;
  text-decoration: line-through;
}

@media (pointer: coarse) {
  .bar-section .legend-chip,
  .chart-card .legend-chip {
    min-height: 40px;
  }

  .bar-section .legend-chips,
  .chart-card .legend-chips {
    gap: var(--space-2) var(--space-2);
  }
}

/* ---- scaling plot ---- */
.chart-plot-wrap {
  position: relative;
}

.chart-plot-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  overflow: visible;
}

@media (pointer: coarse) {
  .chart-plot-wrap svg {
    cursor: default;
  }
}

.scaling-hint {
  margin: 0 0 var(--space-3);
  text-align: left;
}

.scaling-hint .hint-coarse {
  display: none;
}

@media (pointer: coarse), (max-width: 599px) {
  .scaling-hint .hint-fine {
    display: none;
  }

  .scaling-hint .hint-coarse {
    display: inline;
  }
}

.sc-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.sc-axis {
  stroke: var(--chart-axis);
  stroke-width: 1;
}

.sc-tick {
  fill: var(--chart-tick);
}

.sc-axis-title {
  fill: var(--chart-value);
  font-weight: 500;
}

.sc-empty {
  fill: var(--chart-value);
  font-weight: 600;
}

/* primary marks: the per-family trend lines; secondary: the fixed baselines */
.sc-trend {
  stroke-width: 3;
  stroke-linecap: round;
}

.sc-baseline {
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

.sc-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
}

.sc-label {
  fill: var(--chart-label);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.sc-label.is-baseline {
  fill: var(--chart-tick);
  font-weight: 400;
}

.mk-halo {
  stroke: var(--marker-halo);
}

.mk-monogram {
  fill: #fff;
}

.sc-selection {
  fill: var(--accent-soft);
  stroke: var(--link);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

/* Reset zoom lives in the plot's top-right corner, next to the thing it changes */
.plot-reset {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

/* legend */
.chart-legend {
  margin-top: var(--space-3);
}

.legend-group + .legend-group,
.legend-baselines {
  margin-top: var(--space-3);
}

.legend-group-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-muted);
}

.legend-baselines > summary,
details.data-table summary {
  list-style: none;
}

.legend-baselines > summary::-webkit-details-marker,
details.data-table summary::-webkit-details-marker {
  display: none;
}

.legend-baselines > summary::before,
details.data-table summary::before {
  content: "\25B8";
  display: inline-block;
  width: 1em;
  transition: transform var(--motion-fast) var(--ease-out);
}

.legend-baselines[open] > summary::before,
details.data-table[open] summary::before {
  transform: rotate(90deg);
}

.legend-baselines > summary {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: var(--space-1) 0;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}

@media (pointer: coarse) {
  .legend-baselines > summary {
    padding: var(--space-3) 0;
  }
}

/* toolbar + buttons: one secondary-button look for everything in the chart cards */
.chart-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.chart-btn {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: var(--lh-ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  min-height: 32px;
  padding: 0 var(--space-4);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
  .chart-btn:not(:disabled):hover {
    background: var(--surface-hover);
    border-color: var(--text-muted);
  }
}

.chart-btn:not(:disabled):active {
  transform: scale(0.97);
}

.chart-btn:disabled {
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-color: var(--border);
  cursor: default;
}

@media (pointer: coarse) {
  .chart-btn {
    min-height: 44px;
    padding: 0 var(--space-5);
  }
}

/* tooltip (scaling plot) */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--tooltip-bg);
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  text-align: left;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  z-index: 10;
}

.chart-tooltip strong {
  font-size: var(--fs-1);
}

/* data table */
details.data-table {
  max-width: 900px;
  margin: var(--space-4) auto 0;
  text-align: center;
}

details.data-table summary {
  display: inline-block;
  padding: var(--space-2) 0;
  cursor: pointer;
  color: var(--link);
  font-weight: 600;
}

@media (pointer: coarse) {
  details.data-table summary {
    padding: var(--space-3) 0;
  }
}

details.data-table .table-container {
  margin-top: var(--space-3);
  text-align: left;
}

details.data-table table {
  font-size: var(--fs-1);
}

/* ---------- real-world RL results (rl-results.js) ---------- */
.rl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  text-align: left;
}
@media (max-width: 900px) {
  .rl-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
}
.rl-card { display: flex; flex-direction: column; gap: var(--space-3); }
.rl-head { display: flex; flex-direction: column; gap: 2px; }
.rl-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; color: var(--ink); }
.rl-head span { font-size: var(--fs-1); color: var(--text-muted); }
.rl-plot { position: relative; padding-left: 1.5rem; margin-top: var(--space-3); }
.rl-axis {
  position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap; font-size: 0.75rem; color: var(--text-muted);
}
.rl-bars {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-2);
  height: 190px; align-items: end;
  border-bottom: 1px solid var(--border-strong);
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--border) calc(25% - 1px), var(--border) 25%);
}
.rl-bar {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  outline: none; cursor: default; transition: opacity var(--motion-fast) var(--ease-out);
}
.rl-col {
  display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--bar, var(--c-gvl));
  height: 0; transition: height 0.8s var(--ease-out); min-height: 0;
}
.rl-grid.is-in .rl-col { height: calc(var(--v) * 1%); }
.rl-grid.is-in .rl-bar:nth-child(2) .rl-col { transition-delay: 0.08s; }
.rl-grid.is-in .rl-bar:nth-child(3) .rl-col { transition-delay: 0.16s; }
.rl-grid.is-in .rl-bar:nth-child(4) .rl-col { transition-delay: 0.24s; }
.rl-val {
  position: absolute; bottom: calc(var(--v) * 1% + 4px); left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); color: var(--ink);
  opacity: 0; transition: opacity 0.4s var(--ease-out) 0.6s, bottom 0s;
}
.rl-grid.is-in .rl-val { opacity: 1; }
.rl-name {
  position: absolute; top: 100%; margin-top: 6px; left: -8px; right: -8px; text-align: center;
  font-size: 0.74rem; line-height: 1.15; color: var(--text-muted); white-space: nowrap;
}
.rl-bars { margin-bottom: 2.2rem; }
.rl-bar.is-gvl { --bar: var(--c-gvl); }
.rl-bar.is-topreward { --bar: var(--c-topreward); }
.rl-bar.is-robometer { --bar: var(--c-robometer); }
.rl-bar.is-dna { --bar: var(--c-dna); }
.rl-bar.is-dna .rl-name { color: var(--c-dna-text); font-weight: 700; }
.rl-bars.has-focus .rl-bar:not(.is-focus) { opacity: 0.45; }
.rl-bar:focus-visible .rl-col { outline: 2px solid var(--link); outline-offset: 2px; }
.rl-photo { border-radius: var(--radius-3, 12px); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); }
.rl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-task { margin: 0; font-size: var(--fs-1); color: var(--text-muted); text-align: center; font-style: italic; line-height: 1.4; min-height: 2.8em; }
@media (prefers-reduced-motion: reduce) {
  .rl-col, .rl-val { transition: none; }
}