/* The forecast chart, shared by Team Northbound and own-data (drawn by
   src/lib/forecastChart.ts). Each page sizes the svg itself; the chart draws
   in CSS pixels at whatever size it's given. Line colors as on the Monte
   Carlo explainer's fan. */

.forecast-chart {
  display: block;
  width: 100%;
}

.forecast-chart .forecast-frame {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.forecast-chart .forecast-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-opacity: 0.6;
}

.forecast-chart .forecast-tick-label {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.forecast-chart .forecast-axis-label {
  fill: var(--muted);
  font-size: 12px;
}

.forecast-chart .forecast-note {
  fill: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.forecast-chart .forecast-not-yet {
  fill: url(#forecast-hatch);
}

.forecast-chart .forecast-hatch-line {
  stroke: var(--border);
  stroke-width: 1.5;
}

.forecast-chart .forecast-playhead {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.forecast-chart .forecast-playhead-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* The past: the CFD's Done line, in its blue with its light fill. */
.forecast-chart .forecast-done {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
}

.forecast-chart .forecast-done-fill {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: none;
}

/* Reality, when rewound: the Done line carrying on, at full strength, in the
   colour of the band of the fan it's in. The likelihood strip's pastels, in
   reality's own meaning: teal above the 50% line, then yellow, orange, and
   red below the 95% line. Its fill stays dimmed. */
.forecast-chart .forecast-reality {
  fill: none;
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.forecast-chart .forecast-reality-under-50 { stroke: #c8f1e8; }
.forecast-chart .forecast-reality-50-85 { stroke: #efcc62; }
.forecast-chart .forecast-reality-85-95 { stroke: #e8925a; }
.forecast-chart .forecast-reality-95 { stroke: #d4554e; }

.forecast-chart .forecast-reality-fill {
  fill: var(--accent);
  fill-opacity: 0.07;
  stroke: none;
}

.forecast-chart .forecast-line {
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
}

.forecast-chart .forecast-line-50 { stroke: #7cc7f2; }
.forecast-chart .forecast-line-85 { stroke: var(--accent-dark); stroke-width: 3; }
.forecast-chart .forecast-line-95 { stroke: #64748b; }

.forecast-chart .forecast-line-label {
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.forecast-chart .forecast-line-label-50 { fill: #3b9fd8; }
.forecast-chart .forecast-line-label-85 { fill: var(--accent-dark); }
.forecast-chart .forecast-line-label-95 { fill: #64748b; }

/* Pointing at the fan, as on the Monte Carlo explainer: neutral dotted
   guides, dark tags as on the scatter plot, and the "from now" scale beside
   the "items done" axis. The chart can always be pointed at, so it keeps a
   finger rather than scrolling the page. */
.forecast-chart {
  touch-action: none;
}

.forecast-chart .fan-pointing {
  pointer-events: none;
}

.forecast-chart .fan-guide {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  stroke-opacity: 0.7;
}

.forecast-chart .fan-tick-label {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.forecast-chart .fan-from-now-zero {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-opacity: 0.35;
}

.forecast-chart .fan-tag-bg {
  fill: var(--accent-dark);
}

.forecast-chart .fan-tag-text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The actual tag and its guide: reality's band colour at the point being
   read, with dark text. */
.forecast-chart .fan-guide-actual {
  stroke-width: 1.75;
}

.forecast-chart .fan-tag-actual .fan-tag-text {
  fill: var(--text);
}

.forecast-chart .fan-guide-actual.fan-actual-under-50 { stroke: #c8f1e8; }
.forecast-chart .fan-guide-actual.fan-actual-50-85 { stroke: #efcc62; }
.forecast-chart .fan-guide-actual.fan-actual-85-95 { stroke: #e8925a; }
.forecast-chart .fan-guide-actual.fan-actual-95 { stroke: #d4554e; }

.forecast-chart .fan-actual-under-50 .fan-tag-bg { fill: #c8f1e8; }
.forecast-chart .fan-actual-50-85 .fan-tag-bg { fill: #efcc62; }
.forecast-chart .fan-actual-85-95 .fan-tag-bg { fill: #e8925a; }
.forecast-chart .fan-actual-95 .fan-tag-bg { fill: #d4554e; }

/* The likelihood strip: a traffic light from least likely to safest, each
   band clearly lighter than the one before it, so the order still reads
   without telling the hues apart. The "from now" numbers it sits behind
   turn dark to stay readable on it. */
.forecast-chart .fan-strip-under-50 { fill: #d4554e; }
.forecast-chart .fan-strip-50-85 { fill: #e8925a; }
.forecast-chart .fan-strip-85-95 { fill: #efcc62; }
.forecast-chart .fan-strip-95 { fill: #c8f1e8; }

.forecast-chart .fan-strip-on-scale ~ .fan-from-now .fan-tick-label {
  fill: var(--text);
}

/* Its controls, and own-data's present's (src/lib/playheadControls.ts):
   play/pause beside a scrubber with only a handle on it, centred under the
   chart. Borrows the replay controls' button and scrubber styles, from
   past-charts.css. */
.playhead-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0.75rem auto 0;
}

.playhead-scrubber {
  flex: 1;
}

.playhead-scrubber .replay-scrubber-track {
  background: color-mix(in srgb, var(--text) 14%, transparent);
}

.playhead-scrubber.replay-scrubber-dragging .replay-scrubber-handle {
  cursor: grabbing;
  transition: none;
}