.forecast-chart {
  color: var(--ink, #1d3028);
}

.forecast-chart-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: -5px 0 8px;
  color: var(--muted, #7d8880);
  font-size: 12px;
}

.forecast-chart-summary strong {
  color: var(--ink, #1d3028);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.forecast-chart-observed-low {
  margin: 0 0 8px;
  color: var(--muted, #7d8880);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.forecast-chart-observed-low strong {
  color: var(--red, #b14d46);
  font-size: inherit;
}

.forecast-chart-plot-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfcf9, #fff);
}

.forecast-chart-svg {
  display: block;
  width: 100%;
  height: 240px;
  overflow: visible;
  cursor: crosshair;
  touch-action: pan-y;
}

.forecast-chart-y-tick line {
  stroke: #e8ece5;
  stroke-width: 1;
}

.forecast-chart-y-tick text,
.forecast-chart-x-tick,
.forecast-chart-threshold-label {
  fill: #7d8880;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.forecast-chart-line {
  fill: none;
  stroke: #164d3b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.forecast-chart-guide {
  stroke: #76947f;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.forecast-chart-point {
  fill: #fff;
  stroke: #438366;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.forecast-chart-point.is-minimum {
  fill: #fff1ee;
  stroke: var(--red, #b14d46);
}

.forecast-chart-point.is-active {
  fill: #dcf2bb;
  stroke: #164d3b;
  stroke-width: 2.5;
}

.forecast-chart-threshold {
  stroke: var(--red, #b14d46);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

.forecast-chart-threshold-label {
  fill: var(--red, #b14d46);
  font-weight: 600;
}

.forecast-chart-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;color:var(--muted);font-size:11px; }
.forecast-chart-minimum { border:0;background:transparent;color:var(--green);font:inherit;font-weight:600;padding:8px;white-space:nowrap; }
.forecast-chart-svg:focus { outline:none; }
.forecast-chart-svg:focus-visible { outline:2px solid #95b975;outline-offset:3px;border-radius:6px; }
.forecast-chart-empty {
  display: grid;
  gap: 4px;
  padding: 22px;
  border: 1px dashed var(--line, #e5e9e3);
  border-radius: 12px;
  color: var(--muted, #7d8880);
  font-size: 12px;
}

.forecast-chart-empty strong {
  color: var(--ink, #1d3028);
  font-size: 14px;
}

.forecast-chart button:focus-visible { outline:3px solid #95b975;outline-offset:3px; }
@media(hover:hover){.forecast-chart-minimum:hover{color:#2d7857;text-decoration:underline;}}
@media(max-width:620px){.forecast-chart-svg{height:200px}.forecast-chart-y-tick text,.forecast-chart-x-tick,.forecast-chart-threshold-label{font-size:10px}}