/* A field-guide inset; fixed light palette preserves the forecast's contrast. */
.daily-opening > .meteogram { flex: 0 1 340px; width: 100%; max-width: 340px; padding: 12px; border: 1px solid #D9D2C5; border-radius: 14px; background: #FBF8F2; color: #16202B; font-variant-numeric: tabular-nums; line-height: 1.35; }
.meteogram .daily-eyebrow { color: #56616C; font-size: .75rem; line-height: 1.4; letter-spacing: .055em; }
.meteogram-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; }
.meteogram-temperature { font: 500 2.625rem/1.05 var(--font-serif); letter-spacing: -.025em; white-space: nowrap; }
.meteogram-subheading { flex: 1 1 110px; color: #56616C; font-size: .75rem; }
.meteogram-condition { font-size: .9375rem; font-weight: 600; margin-top: 3px !important; }
.meteogram-chart { position: relative; height: 128px; margin-top: 8px; cursor: crosshair; touch-action: pan-y; }
.meteogram-chart:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.meteogram-chart svg { width: 100%; height: 128px; overflow: hidden; font-family: var(--font-sans); font-size: 14px; }
.meteogram-night { fill: #E7E1D5; }
.meteogram-daylight { fill: #F3E6C2; }
.meteogram-midnight { stroke: #B9B1A4; stroke-width: .6; stroke-dasharray: 1.5 3; }
.meteogram-line { fill: none; stroke: #16202B; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.meteogram-dot { fill: #16202B; }
.meteogram-extreme, .meteogram-freeze-label { fill: #16202B; font-size: 14px; }
.meteogram-extreme--high { font-weight: 700; }
.meteogram-rain { fill: #4F86C6; }
.meteogram-half { stroke: #B9B1A4; stroke-width: .7; stroke-dasharray: 1 3; }
.meteogram-freeze { stroke: #56616C; stroke-width: .7; stroke-dasharray: 4 3; }
.meteogram-day { fill: #56616C; font-size: 14px; }
.meteogram-day--selected { fill: #16202B; font-weight: 700; }
.meteogram-peak { fill: #2B64A8; font-size: 14px; font-weight: 700; paint-order: stroke; stroke: #FBF8F2; stroke-width: 3px; stroke-linejoin: round; }
.meteogram-baseline { stroke: #B9B1A4; stroke-width: .7; }
.meteogram-summary { font-size: .8125rem; margin-top: 5px !important; }
.meteogram-clock, .meteogram-stale { font-size: .75rem; margin-top: 6px !important; }
.meteogram-clock { font-weight: 600; }
.meteogram-stale { background: #FBE7D6; color: #7A2E0B; padding: 5px 7px; border-radius: 4px; }
.meteogram-footer { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #D9D2C5; color: #56616C; font-size: .75rem; }
.meteogram-footer p { flex: 1; }
.meteogram-footer a { flex: none; color: #16202B; font-weight: 700; min-height: 24px; }
.meteogram-alert { display: block; margin: -3px -3px 8px; padding: 5px 6px; border: 1px solid #E9B48A; border-radius: 7px; background: #FBE7D6; color: #7A2E0B; font-size: .75rem; font-weight: 700; white-space: nowrap; overflow-x: auto; letter-spacing: -.015em; }
.meteogram-unavailable { height: 128px; margin-top: 8px; border: 1px dashed #D9D2C5; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; font-size: .8125rem; }
.meteogram-unavailable span { color: #56616C; }
.meteogram-guide { position: absolute; top: 0; bottom: 24px; border-left: 1px solid #56616C; pointer-events: none; }
.meteogram-readout { position: absolute; top: 0; left: 0; right: 0; padding: 5px; color: #16202B; background: #FBF8F2; border: 1px solid #D9D2C5; border-radius: 4px; font-size: .75rem; pointer-events: none; box-shadow: 0 2px 4px #16202B12; }
.meteogram [hidden] { display: none; }
@media (max-width: 40rem) {
  .daily-opening > .meteogram { display: block; margin-inline: auto; flex-basis: 340px; }
}
@media (prefers-contrast: more) {
  .meteogram-midnight, .meteogram-half, .meteogram-baseline { stroke: #56616C; }
}