/* Route Weather — charts along the route (js/charts.js), the playback controls
   (js/playback.js) and the position readout (js/readout-view.js). Dark only,
   like the rest of the page; series colours are the dark steps of a
   CVD-checked categorical palette (blue, orange, aqua: all pairs pass against
   --panel). */

:root {
  --series-1: #3987e5;  /* wind speed; rain bars (own strip) */
  --series-2: #d95926;  /* temperature; chance of rain (own strip) */
  --series-3: #199e70;  /* gust (dashed too, beside the blue headwind) */
  --chart-ink: var(--muted);
  --chart-grid: #2c2c2e;
  /* Neutral, so it never reads as one of the series. */
  --chart-cursor: var(--fg);
  /* Outside-forecast hatch: lighter than the grid, and hatched so it stays
   distinct from the grey elevation profile. */
  --outside: rgba(154, 160, 166, 0.12);
  --outside-line: rgba(154, 160, 166, 0.35);
  /* Sky strip and night shading. */
  --sun: #e8c547;
  --cloud: rgba(200, 205, 212, 0.28);
  --night: rgba(70, 90, 170, 0.18);
}

/* --- charts --- */

#chartsPanel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 8px 8px; margin-bottom: 18px; min-width: 0;
}

.route-charts {
  display: block; width: 100%; max-width: 100%;
  font-size: 11px; color: var(--chart-ink);
  /* A horizontal drag seeks; vertical swipes still scroll the page. */
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}

.route-charts .axis path,
.route-charts .axis line { stroke: var(--line); }
.route-charts .axis text { fill: var(--chart-ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.route-charts .strip-title { fill: var(--fg); font-size: 11px; font-weight: 600; }
.route-charts .axis-label { fill: var(--chart-ink); font-size: 10px; }
.route-charts .chart-note { fill: var(--chart-ink); font-style: italic; }
.route-charts .grid line { stroke: var(--chart-grid); stroke-width: 1; }
/* The band's fill is a hatch pattern (charts.js): a light wash plus lines. */
.route-charts .outside-hatch rect { fill: var(--outside); }
.route-charts .outside-hatch line { stroke: var(--outside-line); stroke-width: 2; }

.route-charts .elev-area { fill: rgba(154, 160, 166, 0.22); }
.route-charts .elev-line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.route-charts .extreme { stroke: var(--panel); stroke-width: 1; }
.route-charts .extreme.peak { fill: var(--peak); }
.route-charts .extreme.valley { fill: var(--valley); }
.route-charts .extreme-label {
  fill: var(--fg); font-size: 10px; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
}

.route-charts .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.route-charts .s-temp { stroke: var(--series-2); }
.route-charts .s-feels { stroke: var(--series-2); stroke-width: 1.75; stroke-dasharray: 1 3; opacity: 0.85; }
.route-charts .s-temp-model { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 4 3; opacity: 0.8; }
.route-charts .s-wind { stroke: var(--series-1); }
.route-charts .s-gust { stroke: var(--series-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.route-charts .s-rain { fill: var(--series-1); }
/* A 3-hour forecast step's average rather than the hour's own amount. */
.route-charts .s-rain.avg { opacity: 0.55; }
/* Chance of rain: a step line in front of the solid rain bars, edged in the
   panel colour so it stays readable where it crosses them. */
.route-charts .prob-line {
  fill: none; stroke: var(--series-2); stroke-width: 2; stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px var(--panel));
}
.route-charts .prob-max { fill: var(--chart-ink); font-size: 10px; }
.route-charts .cloud-area { fill: var(--cloud); }
.route-charts .s-sun { fill: var(--sun); }
.route-charts .s-sun.est { fill: var(--sun); opacity: 0.4; }
.route-charts .night-bands rect { fill: var(--night); }
.route-charts .sun-event-line { stroke: var(--sun); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.route-charts .sun-event-label {
  fill: var(--sun); font-size: 10px;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
}

.route-charts .chart-cursor { stroke: var(--chart-cursor); stroke-width: 1.5; pointer-events: none; }
.route-charts .chart-hit { fill: transparent; cursor: ew-resize; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0 6px;
  list-style: none; font-size: 12px; color: var(--muted);
}
.chart-legend li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.legend-strip { color: var(--fg); font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.swatch { display: inline-block; flex: none; }
.swatch-line { width: 16px; height: 0; border-top: 2px solid; }
.swatch-bar { width: 10px; height: 10px; border-radius: 2px; }
.swatch-area { width: 12px; height: 10px; border-radius: 2px; }
.swatch.s-rain { background: var(--series-1); }
.swatch.s-rain-avg { background: var(--series-1); opacity: 0.55; }
.swatch.s-prob { border-color: var(--series-2); }
.swatch.s-cloud { background: var(--cloud); }
.swatch.s-sun { background: var(--sun); }
.swatch.s-sun-est { background: var(--sun); opacity: 0.4; }
.swatch-night { width: 14px; height: 10px; border: 1px solid var(--line); background: var(--night); }
.swatch-band {
  width: 14px; height: 10px; border: 1px solid var(--line);
  background: repeating-linear-gradient(
    45deg, var(--outside-line) 0 2px, var(--outside) 2px 4.2px);
}
.swatch-peak, .swatch-valley { width: 9px; height: 8px; }
.swatch-peak { background: var(--peak); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.swatch-valley { background: var(--valley); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.swatch.s-temp { border-color: var(--series-2); }
.swatch.s-feels { border-top-style: dotted; border-color: var(--series-2); }
.swatch.s-temp-model { border-top-style: dashed; border-color: var(--muted); }
.swatch.s-wind { border-color: var(--series-1); }
.swatch.s-gust { border-top-style: dashed; border-color: var(--series-3); }

/* --- playback controls --- */

#playback {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 18px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.pb-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.pb-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-width: 88px; justify-content: center;
}
.pb-icon { font-size: 11px; letter-spacing: -1px; }
.pb-slider {
  flex: 1 1 200px; min-width: 0; accent-color: var(--accent); margin: 0;
}
.pb-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-speed { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pb-speed select {
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 6px; font: inherit; color-scheme: dark;
}
.pb-speed select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pb-time {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap;
}

/* --- readout --- */

.readout {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px; margin: 0;
}
.readout-item { min-width: 0; }
.readout-item dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); font-weight: 600;
}
.readout-item dd {
  margin: 2px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* Long two-part values get a wider cell. */
.readout-wind, .readout-relative, .readout-model, .readout-weather, .readout-light,
.readout-sky { grid-column: span 2; }
.readout-model dd { color: var(--muted); font-size: 13px; }
.readout.outside .readout-weather dd { color: var(--muted); font-style: italic; }

@media (max-width: 600px) {
  #chartsPanel { padding: 8px 4px 6px; }
  #playback { padding: 10px; }
  .pb-slider { flex-basis: 100%; order: 3; }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout-wind, .readout-relative, .readout-model, .readout-weather, .readout-light,
  .readout-sky { grid-column: 1 / -1; }
}