/* =====================================================================
 * 40 · 历史天气查询 history-hourly-weather.css —— 温度曲线图
 * 主色：晴橙 + 水青；母题：曲线图 / 降水柱 / 站点观测牌
 * ===================================================================== */

.hc--chart {
    --hc-a: #d3702c;
    --hc-a-soft: #faece0;
    --hhw-max: #e07b39;
    --hhw-min: #3f8fa8;
    --hhw-rain: #9db7bf;
}
:root[data-theme="dark"] .hc--chart {
    --hc-a: #eda15f;
    --hc-a-soft: #332619;
    --hhw-max: #eda15f;
    --hhw-min: #74bdd4;
    --hhw-rain: #4a6570;
}

/* ---------- 首屏 ---------- */
.hhw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: 34px;
    align-items: center;
    padding-top: 26px;
}
.hhw-hero h1 { margin: 14px 0 12px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 780; letter-spacing: -.02em; }

.hhw-chart-preview {
    background: var(--hc-card); border: 1px solid var(--hc-line-2); border-radius: var(--hc-r);
    box-shadow: var(--hc-shadow-sm); padding: 20px;
    justify-self: end; max-width: 340px; width: 100%;
}
.hhw-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--hc-muted); }
.hhw-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: 3px; }
.hhw-legend .l-max::before { background: var(--hhw-max); }
.hhw-legend .l-min::before { background: var(--hhw-min); }
.hhw-legend .l-rain::before { background: var(--hhw-rain); height: 10px; width: 6px; }

/* 表单 */
.hhw-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.hhw-status { min-height: 20px; font-size: 12.5px; color: var(--hc-muted); }
.hhw-status.is-busy { color: var(--hc-a); }

/* 图表 */
.hhw-chart { overflow-x: auto; }
.hhw-chart svg { display: block; min-width: 720px; width: 100%; height: auto; }
.hhw-chart .axis-label { font-size: 10px; fill: var(--hc-muted); font-family: var(--hc-sans); }
.hhw-chart .gridline { stroke: var(--hc-line-2); stroke-width: 1; }
.hhw-chart .bar { fill: var(--hhw-rain); }
.hhw-chart .line-max { fill: none; stroke: var(--hhw-max); stroke-width: 2.4; stroke-linecap: round; }
.hhw-chart .line-min { fill: none; stroke: var(--hhw-min); stroke-width: 2.4; stroke-linecap: round; }
.hhw-chart .line-max.forecast, .hhw-chart .line-min.forecast { stroke-dasharray: 6 5; }
.hhw-chart .splitline { stroke: var(--hc-muted); stroke-dasharray: 2 4; stroke-width: 1; }
.hhw-chart .splitlabel { font-size: 10px; fill: var(--hc-muted); }

@media (max-width: 880px) {
    .hhw-hero { grid-template-columns: 1fr; }
    .hhw-chart-preview { justify-self: start; }
}