/* css/elevation.css — P1-08. Elevation profile chart.
   Owned by P1-08. Everything here is scoped under .elev / .elev-* so it can
   never leak into the map, the chrome or another module's panel section.

   MOBILE-FIRST. The hard constraint is legibility at 320px: the side panel is
   22rem (352px) minus padding on desktop, and below 48rem it becomes a
   full-width bottom sheet on a phone. ~320px IS the design width. The SVG's
   viewBox is 320 x 176, so one viewBox unit == one CSS pixel there, and font
   sizes below are real pixel sizes at the narrowest case and scale up on wide
   screens rather than shrinking.

   Colours come exclusively from the tokens styles.css already defines:
   --bg --bg-raised --line --text --text-dim --accent --accent-2 --warn --bad
   --radius --pad --font --mono. Nothing is hardcoded except alpha overlays
   derived from the accent.

   LOADING: nothing links this file yet. index.html and styles.css are owned by
   another step, so js/elevation.js injects a <link> to it on first use. See
   the P1-08 entry in INTEGRATION-NOTES.md, which asks the owning step to add a
   permanent <link rel="stylesheet" href="css/elevation.css"> (or an @import in
   styles.css) so the injection can be deleted. */

/* max-width caps the whole card, not just the SVG, so the chart and its
   summary line stay aligned. Everything inside the SVG — including type —
   scales with the viewBox, so an uncapped chart handed a 1280px column
   renders its 10-unit tick labels at 40px and looks broken. 30rem caps the
   scale at about 1.5x; it never binds inside the 22rem panel this ships in. */
.elev {
  margin: 0 0 var(--pad);
  max-width: 30rem;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The chart scales to whatever width it is given and keeps its aspect ratio.

   `display: block` matters: an inline SVG otherwise sits on the text baseline
   and leaves a few stray pixels of gap under it. The width cap lives on .elev
   above so the chart and the summary line share it. */
.elev-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font);
  overflow: visible;
}

/* --- plot ---------------------------------------------------------------- */

.elev-area {
  fill: var(--accent);
  fill-opacity: 0.16;
  stroke: none;
}

.elev-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* stays 1.6px on a wide screen too */
}

.elev-grid line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.elev-baseline {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- axes ---------------------------------------------------------------- */

/* 10px at 320px wide. Four ticks per axis is few enough that labels never
   collide at that width — the reason the tick count is capped in the JS. */
.elev-tick {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--text-dim);
}

.elev-axis-title {
  font-family: var(--font);
  font-size: 10px;
  fill: var(--text-dim);
  letter-spacing: 0.02em;
}

/* --- summary line -------------------------------------------------------- */

/* Gain, loss, total distance, low and high. Wraps to as many rows as the
   container needs; at 320px it settles on two. */
.elev-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.85rem;
  margin: 0;
  padding: 0.5rem var(--pad) 0.6rem;
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.elev-stat {
  white-space: nowrap;
}

.elev-stat b {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
}

/* Gain is the number Dan actually reads first, so it gets the hike accent.
   Loss is deliberately quieter — it is context, not the headline. */
.elev-stat.is-gain b { color: var(--accent); }
.elev-stat.is-loss b { color: var(--text-dim); }

/* --- degraded states ----------------------------------------------------- */

/* Shown when both elevation endpoints failed and there is no cached series,
   or when a site has no mapped trail line. Never an error dialog: the panel
   keeps working, it just says what is missing. */
.elev-unavailable {
  margin: 0 0 var(--pad);
  padding: var(--pad);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.elev-note {
  margin: 0;
  padding: 0 var(--pad) 0.6rem;
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* --- accessibility ------------------------------------------------------- */

@media (prefers-contrast: more) {
  .elev-area { fill-opacity: 0.28; }
  .elev-line { stroke-width: 2.2; }
  .elev-tick, .elev-axis-title { fill: var(--text); }
  .elev-summary { color: var(--text); }
}

/* Printing an itinerary: keep the profile readable on white paper. */
@media print {
  .elev { border-color: #999; background: #fff; }
  .elev-summary { background: #fff; color: #000; border-top-color: #999; }
  .elev-stat b { color: #000; }
  .elev-line { stroke: #000; }
  .elev-area { fill: #000; fill-opacity: 0.10; }
  .elev-tick, .elev-axis-title { fill: #333; }
}