/* SPDX-License-Identifier: MIT
 *
 * chart-legend.css — the legend and the end labels, ported from hire4real's
 * static/css/components/chart-legend.css (R93/R100) at ebca5d4.
 *
 * The legend is server-drawn on this site and carries what SL_05 already put in it - each
 * series' own window AND its population, which hire4real's legend does not have: an addition,
 * not a divergence. Its items keep SL_05's `legend-item` class, which its tests read, and take
 * `chart-legend__item`'s geometry here. The end labels live inside the chart's shadow root,
 * which loads this file as well.
 *
 * No colour value: an end label takes its series' token from the component; everything else
 * is ink.
 */

/* R93a - a legend with an explicit gap, so two labels never read as one. SL_05D-17: laid out as
 * a GRID, one cell per series, rather than a run of sentences: a legend that reads as prose is
 * not a legend. */
.chart-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
  gap: 0.6rem 1.25rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.chart-legend__item,
.chart-legend > .legend-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Line one: the swatch and the series' name. Lines two and three: the window and population,
 * then how it is drawn - muted, smaller, each a block of its own. */
.legend-item__head {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  color: var(--ink);
}

.legend-item__detail {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-2);
}

.chart-legend__swatch,
.chart-legend .swatch {
  width: 0.7em;
  height: 0.7em;
  border-radius: 2px;
  flex: 0 0 auto;
  margin-right: 0;
}

/* R100 - the series name at the right end of its own line. Positioned from the series' own
 * priceToCoordinate(), so it tracks the line rather than a second guess at where it ended. */
.chart-ends {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* SL_05D-16: each end label is a PILL in its own series' hue, the name reversed out of it, so it
 * is legible over a grid line. The component sets both colours from the series' token; the
 * placement keeps every pill clear of the others and of both axes. */
.chart-end {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}