/* Page-local styles for the chart explorer. Loaded after /shared/site.css, so the token layer
 * and the accent are already in place and this file only adds what one page needs: the control
 * row, the plot box, and three small corrections to uPlot's stock chrome.
 *
 * Nothing here moves. The crosshair is the only thing on the page that responds to a pointer. */

/* The controls are one row above the chart, per the dataviz interaction rules: never per chart,
 * never inside the figure. They wrap into columns on a narrow screen instead of scrolling. */
#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  margin-bottom: var(--pico-block-spacing-vertical);
}

/* Pico gives every fieldset width:100%, which would stack these five one per line and push the
 * chart off the first screen. They are a row of columns here. */
#controls fieldset {
  width: auto;
  flex: 0 1 auto;
  margin-bottom: 1rem;
  min-width: 0;
}

#controls legend {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

#controls label {
  font-size: 0.875rem;
  margin-bottom: 0.1rem;
}

/* An era or a venue the release does not carry stays visible and stays off. A control that
 * vanishes teaches the reader nothing, a disabled one says what is missing. */
#controls label.unavailable,
#controls input:disabled + span,
#controls input:disabled {
  color: var(--pico-muted-color);
  cursor: not-allowed;
}

/* The plot box reserves the plot area. uPlot's legend sits under it inside this box and doubles
 * as the crosshair readout, so the height is a floor and never a cap: capping it would clip the
 * readout. */
#plot {
  min-height: 380px;
}

figure > figcaption {
  font-size: 0.875rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.5rem;
}

#chart-source {
  font-size: 0.875rem;
}

/* uPlot corrections. The legend is the hover readout, so its numbers align in a column. */
.u-legend {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.u-legend .u-value {
  text-align: right;
}

/* uPlot ships a dashed crosshair. A hairline reads as a pointer, a dashed one reads as a
 * threshold that is not there. */
.u-hz .u-cursor-x {
  border-right: 1px solid var(--pico-muted-color);
}

.u-hz .u-cursor-y {
  border-bottom: 1px solid var(--pico-muted-color);
}

@media print {
  #controls,
  #plot,
  .u-legend {
    display: none;
  }
}