/* (`.benchmark-option[data-disabled="true"]` rule lives in
 * src/resources/components.css now — shared across all dashboards.) */

/* No --prior-sys-colour-chart-secondary override here:
 * the theme defaults are #121212 (light) / #d0d0d0 (dark), which both
 * read clearly against their respective backgrounds. Forcing #121212
 * at :root level (as the file used to) made the benchmark bar invisible
 * on dark theme. */

/* ---- chart-area: flex row containing the slider + the chart ----
 * Generous top margin so the slider's clock icon and chart's first
 * row don't crowd up against the SORT pill above. */
.chart-area {
  display: flex;
  width: 100%;
  align-items: stretch;
  margin-top: 20px;
}

/* ---- Time slider column (vertical, sits to the LEFT of the chart) ----
 * The chart owns the year labels on its own y-axis; the slider's only
 * job is to host the track and the draggable thumb. JS positions both
 * to align with the Chart.js bar row pixel-coordinates, so sort changes
 * and window resizes keep them in sync. For 10-year-change metrics the
 * slider goes data-disabled and visually fades. */
.time-slider {
  position: relative;
  flex: 0 0 32px;
  user-select: none;
}

.time-slider[data-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* Clock icon sitting above the track top — visual cue that the
 * slider's axis represents time. JS sets `top` so it lines up with the
 * very start of the track. */
.time-slider-clock {
  position: absolute;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;

  /* ---- TWEAK THIS NUMBER to change the gap between the clock and
     * the top of the track line. Bigger value = clock further above
     * the track. JS sets --track-top to the chart's bar-area top in
     * pixels; this calc subtracts the clock's height + the gap. ---- */
  --clock-gap: -2px;
  top: calc(var(--track-top, 10px) - 20px - var(--clock-gap));

  color: var(--prior-sys-chart-grid-colour, #d0d0d0);
  display: none; /* shown by JS once the chart is laid out */
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

/* Vertical track line, horizontally centred in the slider column. */
.time-slider-track {
  position: absolute;
  left: 50%;
  margin-left: 0;
  width: 1px;
  background: var(--prior-sys-chart-grid-colour, #d0d0d0);
  cursor: pointer;
  z-index: 1;
}

/* Tick marks across the track at each year row's center, so the slider
 * visually reads as a graduated time scale rather than a single line. */
.time-slider-tick {
  position: absolute;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 1px;
  background: var(--prior-sys-chart-grid-colour, #d0d0d0);
  z-index: 1;
  pointer-events: none;
}

/* Draggable thumb — solid square in the chart-main colour so the active
 * row + thumb read as one highlighted unit. */
.time-slider-thumb {
  position: absolute;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  padding: 0;
  background: var(--prior-sys-colour-chart-main);
  color: var(--prior-sys-colour-chart-main);
  border: 0;
  border-radius: 0;
  cursor: grab;
  z-index: 2;
  user-select: none;
  display: none;
  transition: top 0.18s ease;
}

.time-slider-thumb:active {
  cursor: grabbing;
  transition: none;
}