.hourly-panel { min-width: 0; margin-bottom: 32px; padding: 26px 28px 18px; border: 1px solid var(--hos-border); border-radius: 20px; background: var(--hos-surface); }
.hourly-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.hourly-heading h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.03em; }
.hourly-range { display: flex; gap: 22px; color: var(--hos-text-muted); font-size: 13px; }
.hourly-range strong { margin-left: 7px; color: var(--hos-text); font-size: 18px; }
.hourly-selection { display: flex; align-items: center; gap: 14px; min-height: 84px; margin-top: 12px; }
.selected-icon { font-size: 32px; }
.selected-temperature { font-size: 32px; letter-spacing: -.04em; min-width: 58px; }
.hourly-selection > div { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.hourly-selection > div > span { color: var(--hos-text-muted); }
.chart-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hos-border) transparent; }
.temperature-chart { display: block; width: 100%; min-width: 700px; height: auto; overflow: visible; }
.chart-grid line { stroke: var(--hos-border); stroke-dasharray: 3 6; }
.chart-grid text, .chart-time { fill: var(--hos-text-muted); font-size: 12px; font-family: inherit; }
.chart-icon { font-size: 22px; }
.chart-line { fill: none; stroke: #ef6866; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { fill: #ef6866; stroke: var(--hos-surface); stroke-width: 2; }
.chart-point.selected { fill: var(--hos-text); stroke: #ef6866; stroke-width: 3; }
.chart-guide { stroke: #ef6866; stroke-opacity: .35; stroke-dasharray: 4 5; }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-hit:focus-visible { outline: none; stroke: var(--hos-text); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-scroll:focus-visible { outline: 2px solid var(--hos-accent); outline-offset: 4px; border-radius: 6px; }
.chart-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hos-border); color: var(--hos-text-muted); font-size: 12px; }
.hourly-empty { color: var(--hos-text-muted); padding: 24px 0; }
.hourly-location { margin: 10px 0 0; color: var(--hos-text-muted); font-size: 14px; }
.chart-rain { fill: #72b9ee; cursor: pointer; }
.chart-now line { stroke: #72b9ee; stroke-width: 2; stroke-dasharray: 4 4; }
.chart-now text { fill: #72b9ee; font-size: 12px; font-family: inherit; }
@media (max-width: 600px) {
    .hourly-panel { padding: 20px 16px 16px; border-radius: 16px; }
    .hourly-heading h2 { font-size: 20px; }
    .hourly-range { gap: 14px; }
}

.weather-page { min-width: 0; }
.weather-city-results { display: grid; gap: 8px; list-style: none; padding: 0; margin: 16px 0; }
.weather-city-results button { width: 100%; height: auto; padding: 12px 16px; text-align: left; white-space: normal; }
.weather-metrics { gap: 28px; }
.weather-week { margin-top: 20px; }
@media (max-width: 600px) {
    .weather-metrics { width: 100%; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--hos-border); }
    .weather-week { grid-template-columns: 1fr; gap: 8px; }
    .weather-day { display: grid; grid-template-columns: 36px 42px 30px minmax(0, 1fr) 64px; gap: 6px; padding: 12px 10px; text-align: left; border-radius: 12px; font-size: 12px; }
    .weather-day-icon { margin: 0; font-size: 26px; }
    .weather-day small { font-size: 11px; }
    .weather-day > div { text-align: right; white-space: nowrap; }
}


/* Keep the weather screen independent of the generated CSS isolation bundle. */
.weather-page { max-width: 1200px; }
.weather-page .page-heading { margin-bottom: 28px; }
.weather-location-bar .text-input { min-height: 52px; }
.weather-location-bar .secondary-action { min-height: 52px; }
.weather-current { padding: 32px 36px; gap: 32px; }
.weather-temperature { font-variant-numeric: tabular-nums; }
.weather-metrics { gap: 0; }
.weather-metric { padding: 0 24px; border-left: 1px solid var(--hos-border); }
.weather-metric:first-child { border-left: 0; }
.weather-metric:last-child { padding-right: 0; }
.weather-metric dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hourly-panel { background: linear-gradient(180deg, #171414, var(--hos-surface) 65%); }
.hourly-range { padding: 10px 16px; border: 1px solid var(--hos-border); border-radius: 12px; background: var(--hos-surface-2); }
.hourly-selection { margin-bottom: 8px; }
.chart-grid text, .chart-time { fill: #b5b0b0; }
.chart-line { stroke-width: 3.5; }
.chart-hit:hover { fill: #ef6866; fill-opacity: .045; }
.weather-week-section h2 { margin: 8px 0 0; font-size: 22px; letter-spacing: -.03em; }
.weather-week { margin-top: 20px; gap: 10px; }
.weather-day { padding: 22px 10px; gap: 10px; }
.weather-day { color: var(--hos-text); font-family: inherit; cursor: pointer; width: 100%; }
.weather-day.selected { border-color: #ef6866; background: linear-gradient(160deg, #281b1b, var(--hos-surface)); }
.weather-day:focus-visible { outline: 2px solid var(--hos-accent); outline-offset: 4px; }
.weather-day > strong { font-size: 14px; }
.weather-day > span:not(.weather-day-icon) { font-size: 12px; }
.weather-day small { font-size: 12px; line-height: 1.5; }
.weather-day > div { font-size: 14px; font-variant-numeric: tabular-nums; }
.weather-credit { line-height: 1.6; }
@media (max-width: 900px) {
    .weather-current { padding: 28px; }
    .weather-metric { padding: 0 16px; }
    .weather-day { padding: 18px 6px; }
}
@media (max-width: 600px) {
    .weather-page .page-heading { margin-bottom: 24px; }
    .weather-location-bar { gap: 10px; }
    .weather-geo { width: 100%; }
    .weather-current { padding: 24px; gap: 24px; }
    .weather-now { gap: 18px; }
    .weather-metrics { flex-wrap: nowrap; gap: 12px; }
    .weather-metric { padding: 0; border-left: 0; }
    .weather-metric dd { font-size: 21px; }
    .weather-metric dt { font-size: 12px; }
    .hourly-heading { align-items: flex-start; }
    .hourly-range { padding: 8px 12px; }
    .hourly-selection { gap: 10px; }
    .hourly-selection > div { font-size: 12px; }
    .selected-temperature { font-size: 28px; min-width: 46px; }
    .temperature-chart { min-width: 640px; }
    .chart-footer { font-size: 11px; }
    .weather-week { grid-template-columns: 1fr; }
    .weather-day { display: grid; grid-template-columns: 34px 44px 34px minmax(0, 1fr) 70px; padding: 14px 12px; gap: 8px; text-align: left; }
    .weather-day > strong { font-size: 12px; }
    .weather-day-icon { font-size: 28px; margin: 0; }
    .weather-day small { font-size: 11px; }
    .weather-day > div { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
    .weather-day { transition: border-color .15s ease, background .15s ease; }
    .weather-day:hover { border-color: #70403f; background: #1b1515; }
}