/* Stilene grafene fra `stations/svgchart.py` trenger.
 *
 * Dette er *den* kilden til disse reglene. De lå tidligere som en streng inne
 * i svgchart.py, og da vi bygde malsidens stilark ble strengen glemt — med det
 * resultatet at alle hover-tooltipene, sikte-strekene og punktene sto på
 * samtidig, og grafen så ut som en prikkete rotete graf i stedet for en linje.
 * Ligger reglene i en fil som lastes av base.html, kan de ikke bli glemt.
 *
 * Selve mekanismen: SVG-en har én usynlig hover-sone per måling, og disse
 * reglene er det som gjør tooltipen synlig når musa er over sonen. Uten dem
 * er ingenting skjult.
 */

.wchart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Alt som hører til hover er skjult til musa er over sonen. */
.wchart__tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.wchart__hover:hover .wchart__tip {
  opacity: 1;
}

/* Tegnforklaringen ligger som HTML under grafen, ikke inne i SVG-en, slik at
   den brytes av seg selv på smal skjerm. */
.wchart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-muted);
}
.wchart__key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.wchart__key i {
  width: 11px;
  height: 3px;
  border-radius: 2px;
}
/* Sammenligning med tidligere sesong: samme farge, stiplet strek i stedet
   for fylt, som linjen selv er tegnet i grafen. */
.wchart__key--dashed {
  opacity: 0.75;
}
.wchart__key--dashed i {
  background: none;
  border-top: 2px dashed;
  height: 0;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wchart__tip {
    transition: none;
  }
}