.fd-section { margin:24px 0 28px; }
.fd-resolution { padding:6px 10px; border-radius:6px; color:#385973; background:#e4edf5; font-size:12px; }
.fd-intro { font-size:14px; line-height:1.7; color:#49637d; margin:0 0 12px; }
.fd-chart-card { border:1px solid #c7d8e7; border-radius:16px; padding:18px 20px 12px; background:white; }
.fd-hours { display:flex; justify-content:space-between; margin:0 18px 4px 66px; font-size:12px; font-variant-numeric:tabular-nums; color:#49637d; }
.fd-metric { display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; margin-right:18px; }
.fd-metric-label { display:flex; flex-direction:column; justify-content:center; font-size:14px; line-height:1.6; color:#183850; }
.fd-metric-label small { font-size:12px; font-weight:400; color:#516779; }
.fd-plot { position:relative; height:80px; cursor:crosshair; }
.fd-plot svg { width:100%; height:72px; position:relative; overflow:visible; }
.fd-grid path { fill:none; stroke:#e2e9ee; stroke-width:1; vector-effect:non-scaling-stroke; }
.fd-data path { fill:none; stroke-width:2.7; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.fd-wind .fd-data path { stroke:#b16c1c; }
.fd-wave .fd-data path { stroke:#167b88; }
.fd-rain .fd-data rect { fill:#448fcb; }
.fd-range-shade { position:absolute; top:0; bottom:8px; background:#edf4fc; }
.fd-cursor { position:absolute; width:1px; top:0; bottom:8px; border-left:1px dashed #234d70; pointer-events:none; }
.fd-scale-top,.fd-scale-zero { position:absolute; left:-4px; top:0; font-size:11px; color:#516779; transform:translateX(-100%); background:#fff; padding-right:2px; }
.fd-scale-zero { top:auto; bottom:7px; }
.fd-gap-note { position:absolute; right:0; top:3px; color:#80561b; font-size:11px; background:#fff8eb; padding:0 4px; }
.fd-time-control { display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid #d8e3ed; }
.fd-time-control > div { flex:1; min-width:0; }
.fd-time-control label { display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:12px; color:#49637d; }
.fd-time-control output { font-size:20px; font-weight:700; color:#153a5b; }
.fd-time-control input { width:100%; height:32px; accent-color:#175eaa; cursor:pointer; }
.fd-time-control button { min-width:44px; min-height:44px; border:1px solid #c7d8e7; background:#f0f5fa; color:#1b527f; border-radius:8px; font-size:24px; }
.fd-time-control #fd-now { font-size:12px; padding:0 10px; white-space:nowrap; }
.fd-time-control button:disabled { opacity:.5; cursor:default; }
.fd-chart-note { color:#506a81; font-size:12px; line-height:1.7; margin:12px 0 0; }
.fd-selected { background:#f4f8fc; border:1px solid #c7d8e7; border-radius:16px; margin-top:16px; padding:20px; }
.fd-selected-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fd-selected-head h3 { margin:0; font-size:18px; }
.fd-selected-head > span { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; }
.fd-sea-pair { display:grid; grid-template-columns:1fr 36px 1fr; align-items:center; margin:18px 0; }
.fd-sea-pair > div { display:flex; flex-direction:column; align-items:center; gap:3px; }
.fd-pair-label { display:flex; align-items:center; gap:7px; font-size:14px; }
.fd-sea-pair strong { font-size:28px; font-variant-numeric:tabular-nums; color:#183850; }
.fd-sea-pair > div > span:last-child { font-size:13px; color:#49637d; }
.fd-plus { text-align:center; font-size:22px; color:#6d8192; }
.fd-sea-reading { border-top:1px solid #ccdae6; padding-top:14px; }
.fd-sea-reading h4 { margin:0 0 6px; font-size:16px; line-height:1.7; }
.fd-sea-reading p { margin:0; font-size:14px; line-height:1.9; color:#38546b; }
.fd-selected-rain { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid #ccdae6; font-size:14px; }
.fd-selected-rain > span { display:flex; align-items:center; gap:6px; }
.fd-selected-rain strong { font-variant-numeric:tabular-nums; color:#175eaa; }
.fd-limit-note { font-size:12px; color:#506a81; line-height:1.8; margin:12px 0 0; }
.fd-weather-strip { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; margin:0 18px 14px 66px; }
.fd-weather-strip > div { display:flex; flex-direction:column; gap:4px; align-items:center; border-right:1px solid #e3ebf3; font-size:11px; color:#506a81; }
.fd-weather-strip > div:last-child { border:0; }
.fd-weather-strip svg { width:26px; height:26px; }
.fd-overview-range { display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:#d9e7f5; align-items:center; }
.fd-overview-range > div { display:flex; flex-direction:column; gap:5px; }
.fd-overview-range strong { font-size:19px; white-space:nowrap; }
.fd-overview-range > p { margin:0 0 0 auto; color:#d2e2f3; font-size:14px; }
.fd-change-range { font-size:12px; color:#c0d5e8; margin:4px 0 12px; }
.fp-maxima { margin-top:16px; border-top:1px solid #426181; padding-top:4px; }
.fp-maxima > summary { font-size:13px; padding:10px 0; cursor:pointer; color:#d1e3f5; min-height:44px; }
.fp-maxima .fp-summary-stats { border:0; padding-top:6px; }
.fp-hourly-details { border:1px solid #c7d8e7; border-radius:12px; padding:4px 16px; margin:24px 0; background:#fff; }
.fp-hourly-details > summary { padding:16px 0; cursor:pointer; font-size:15px; font-weight:700; }
.fp-hourly-details > section { padding:12px 0; }
.fp-overview { margin-bottom:20px; }
.fp-overview .fp-safety { margin-top:8px; }
@media(max-width:700px) {
 .fd-chart-card { padding:14px 10px 12px; }
 .fd-hours { margin-left:50px; margin-right:8px; }
 .fd-metric { grid-template-columns:36px minmax(0,1fr); gap:14px; margin-right:8px; }
 .fd-plot { height:76px; }
 .fd-metric-label { font-size:13px; }
 .fd-weather-strip { margin-left:50px; margin-right:8px; }
 .fd-weather-strip svg { width:23px; height:23px; }
 .fd-weather-strip > div { font-size:10px; }
 .fd-time-control { gap:6px; }
 .fd-time-control #fd-now { padding:0 6px; }
 .fd-selected { padding:16px; }
 .fd-selected-head h3 { font-size:17px; }
 .fd-sea-pair strong { font-size:24px; }
 .fd-overview-range { gap:16px; }
 .fd-overview-range strong { font-size:17px; }
 .fd-overview-range > p { margin-left:0; width:100%; }
 .fp-hourly-details { padding:2px 10px; }
}

#fd-hour-output { white-space:nowrap; }