/* Elevation profile chart (js/profile.js). Themed through the app's --tm-*
   custom properties; every one has a fallback so the chart stands alone. */

.tm-profile {
  --_ink: var(--tm-ink, #1f2a24);
  --_muted: var(--tm-muted, #6b756f);
  --_accent: var(--tm-accent, #d4683c);
  --_forest: var(--tm-forest, #2f5d46);
  --_line: var(--tm-line, rgba(31, 42, 36, .08));
  --_surface: var(--tm-surface, #fffdf8);

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 96px;
  overflow: hidden;
  color: var(--_ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tm-profile__svg {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  /* The card is fixed, so the plot owns horizontal drags outright. */
  touch-action: none;
  cursor: crosshair;
}

/* ---- gradients ---- */
.tm-profile__stop--ahead.tm-profile__stop--top { stop-color: var(--_forest); stop-opacity: .28; }
.tm-profile__stop--ahead.tm-profile__stop--bottom { stop-color: var(--_forest); stop-opacity: .02; }
.tm-profile__stop--done.tm-profile__stop--top { stop-color: var(--_accent); stop-opacity: .32; }
.tm-profile__stop--done.tm-profile__stop--bottom { stop-color: var(--_accent); stop-opacity: .03; }

/* ---- line ---- */
.tm-profile__line {
  fill: none;
  stroke: var(--_forest);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tm-profile__line--done { stroke: var(--_accent); }

/* ---- axes ---- */
.tm-profile__gridline { stroke: var(--_line); stroke-width: 1; shape-rendering: crispEdges; }
.tm-profile__tick { stroke: var(--_muted); stroke-opacity: .35; stroke-width: 1; shape-rendering: crispEdges; }
.tm-profile__ylabel,
.tm-profile__xlabel {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  fill: var(--_muted);
}
/* A surface-coloured halo keeps y labels legible where they sit over the fill. */
.tm-profile__ylabel {
  paint-order: stroke;
  stroke: var(--_surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-opacity: .85;
}

/* ---- markers ---- */
.tm-profile__hair { stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.tm-profile__hair--pos { stroke: var(--_accent); stroke-opacity: .35; stroke-dasharray: 2 3; }
.tm-profile__hair--hl { stroke: var(--_ink); stroke-opacity: .32; }
.tm-profile__pos-halo { fill: var(--_accent); fill-opacity: .18; }
.tm-profile__pos-dot { fill: var(--_accent); stroke: var(--_surface); stroke-width: 2; }
.tm-profile__hl-dot { fill: var(--_surface); stroke: var(--_ink); stroke-width: 2; }

.tm-profile__pos,
.tm-profile__hair--pos,
.tm-profile__hair--hl,
.tm-profile__hl-dot { visibility: hidden; pointer-events: none; }
.tm-profile.has-position .tm-profile__pos,
.tm-profile.has-position .tm-profile__hair--pos { visibility: visible; }
.tm-profile.has-highlight .tm-profile__hair--hl,
.tm-profile.has-highlight .tm-profile__hl-dot { visibility: visible; }

/* ---- tooltip ---- */
.tm-profile__tip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--_ink);
  color: var(--_surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(31, 42, 36, .18);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.tm-profile.has-highlight .tm-profile__tip { opacity: 1; }

/* ---- empty state ---- */
.tm-profile__empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--_muted);
  font-size: 13px;
}
.tm-profile.is-empty .tm-profile__empty { display: flex; }
.tm-profile.is-empty .tm-profile__svg,
.tm-profile.is-empty .tm-profile__tip { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .tm-profile__tip { transition: opacity .12s ease; }
}