/* Water-level chart in the style of flood-forecast hydrographs:
   filled observed area, dotted forecast, threshold lines, "now" marker. */

.chart-wrap { position: relative; margin: 0 -4px; }
.chart { display: block; width: 100%; height: auto; touch-action: none; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .area { fill: url(#fw-area); }
.chart .area-fc { fill: url(#fw-area); opacity: 0.45; }
.chart .line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.demo { stroke: var(--serious); stroke-dasharray: 4 3; }
.chart .forecast { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 0.1 5; stroke-linecap: round; }
.chart .threshold { stroke-width: 1.5; }
.chart .threshold.near { stroke: var(--warning); }
.chart .threshold.bank { stroke: var(--critical); }
.chart .threshold.control { stroke: var(--muted); stroke-dasharray: 2 3; }
.chart .now { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.chart .now-label { fill: var(--text-2); font-size: 10px; font-weight: 600; font-family: var(--font); }
.chart .last { fill: var(--brand); stroke: var(--surface); stroke-width: 2.5; }
.chart .peak { fill: var(--surface); stroke: var(--serious); stroke-width: 2.5; }
.chart .hover-line { stroke: var(--text-2); stroke-width: 1; opacity: 0.4; }
.chart .hover-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }

.chart-tip {
  position: absolute;
  top: 0;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
}
.chart-tip[hidden] { display: none; }
.chart-tip span { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }

.thresholds { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.thresholds div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.thresholds i { width: 14px; height: 0; border-top: 2px solid var(--tone, var(--brand)); }
.thresholds i.dotted { border-top-style: dotted; border-top-width: 3px; }
.thresholds b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-note { margin-top: 8px; font-size: 11px; color: var(--muted); }