/*
 * elevation-profile -- das Höhenprofil einer Tour (partials/elevation-profile.php,
 * Fragenkatalog F6).
 *
 * elevation-profile__facts    Aufstieg, Abstieg, höchster und tiefster Punkt als Text
 * elevation-profile__plot     die Zeichenfläche: SVG mit Fläche und Linie, dazu die Höhen
 *                             an der Achse und die Anzeige beim Überfahren
 * elevation-profile__x-labels die Strecke unter der Zeichenfläche
 *
 * Eine Reihe in der Hauptfarbe: Linie 2px, Fläche als zarter Schleier derselben Farbe,
 * Hilfslinien haarfein in der Rahmenfarbe. Schrift nie in der Farbe der Linie.
 */

.elevation-profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* In den Abschnitten von Gast und Teilnehmer (layout__band) eine Karte, die Überschrift
   in Kartengröße */
.layout__band .elevation-profile {
  padding: var(--space-5) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-card);
  box-shadow: var(--shadow-small);
}

.layout__band .elevation-profile > h2 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-heavy);
}

.elevation-profile__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.elevation-profile__fact {
  display: flex;
  flex-direction: column-reverse;
}

.elevation-profile__fact-value {
  margin: 0;
  font-size: var(--font-size-large);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
}

.elevation-profile__fact-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.elevation-profile__plot {
  position: relative;
  block-size: 10rem;
  /* Senkrecht weiterscrollen geht, waagerecht gehört der Finger dem Profil. */
  touch-action: pan-y;
}

.elevation-profile__plot:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.elevation-profile__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.elevation-profile__grid {
  stroke: var(--color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.elevation-profile__area {
  fill: var(--color-primary);
  fill-opacity: 0.1;
}

.elevation-profile__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.elevation-profile__y-label {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Knapp unter der oberen und über der unteren Hilfslinie, zu der sie gehören. */
.elevation-profile__y-label--top {
  inset-block-start: var(--space-1);
}

.elevation-profile__y-label--bottom {
  inset-block-end: var(--space-1);
}

.elevation-profile__x-labels {
  position: relative;
  block-size: 1.5em;
  margin-block-start: var(--space-1);
}

.elevation-profile__x-label {
  position: absolute;
  inset-block-start: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Der Start steht am linken Rand, das Ziel am rechten -- beide ragen nicht hinaus. */
.elevation-profile__x-label:first-child {
  transform: none;
}

.elevation-profile__x-label--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
}

.elevation-profile__crosshair {
  position: absolute;
  inset-block: 0;
  inline-size: 1px;
  background: var(--color-text-muted);
  pointer-events: none;
}

.elevation-profile__marker {
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.elevation-profile__tooltip {
  position: absolute;
  inset-block-start: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: var(--shadow-small);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.elevation-profile__tooltip-distance {
  color: var(--color-text-muted);
}

.elevation-profile [hidden] {
  display: none;
}