/* Large display layout keeps the monitoring panels together. */
dialog{color:#eaf1f8;background:#101e30;border:1px solid #3d5d79;border-radius:16px;box-shadow:0 20px 90px #0009;padding:24px;max-height:94vh;width:min(1100px,96vw)}dialog::backdrop{background:#040b16dd;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.dialog-head h2{font-size:24px;margin-top:8px}.dialog-head button{white-space:nowrap}.dialog-foot{display:flex;justify-content:space-between;gap:12px;margin-top:15px;color:#a9bed3}.dialog-foot small{font-size:11px}.dialog-foot>span{color:#65e0ca;font-variant-numeric:tabular-nums}#rainMessage{font-size:16px;color:#c6d8e7}#rainRadarHost .radar{border:0;padding:0;overflow:visible}#rainRadarHost #map{height:min(48vh,500px);min-height:220px}#rainRadarHost #rainTest{display:none}#rainRadarHost .section-top h2{font-size:15px}#typhoonDetail svg{display:block;width:100%;max-height:65vh}#typhoonDetail .wind-storm{font-size:17px;font-weight:600}#typhoonDetail .wind-gale{font-size:13px;color:#b7c8d8}.typhoon-selector{display:flex;gap:5px;margin-bottom:5px}.typhoon-selector select{font-size:11px;flex:1;min-width:0;padding:3px 5px}.typhoon-selector button{font-size:10px;padding:3px 8px}.typhoon-image{width:100%;height:104px;padding:0;border:0;display:block;background:#192e47;border-radius:5px;overflow:hidden}.typhoon-image svg{width:100%;height:100%;display:block}.wind-summary p{font-size:10px;line-height:1.35;margin:4px 0}.wind-gale{color:#a8b9cb}.rain-outlook{font-size:10px;color:#75dfca;margin-top:5px;display:inline-block}.rain-test{padding:2px 6px;font-size:9px;margin-left:7px}.radar-placeholder{color:#75dfca;display:grid;place-items:center}.typhoon .section-top .text-link{margin:0}
@media(max-width:650px){dialog{padding:15px}.dialog-head h2{font-size:18px}.dialog-foot{display:block}.dialog-foot small{display:block;margin-top:7px}#rainMessage{font-size:13px}}
@media(min-width:1200px){
 header{padding:15px 25px}main{padding:0 22px 14px}.overview{padding:10px 0}.warning{padding:9px 14px;margin-bottom:12px}
 .grid{grid-template-columns:1fr 1.25fr 1.25fr 1fr;gap:12px}.panel{padding:14px}.section-top{margin-bottom:9px}h2{font-size:14px}
 .current{grid-column:1;grid-row:1}.forecast{grid-column:2/4;grid-row:1}.typhoon{grid-column:4;grid-row:1}.radar{grid-column:1/3;grid-row:2}.weekly{grid-column:3;grid-row:2}.official{grid-column:4;grid-row:2}.links{grid-column:1/3;grid-row:3}.sources{grid-column:3/5;grid-row:3}
 #chart{height:145px}.temp{font-size:54px}.condition{margin:8px 0 12px}.stats strong{font-size:19px}.stats{gap:5px}.footnote{font-size:10px;margin-top:8px}.stats label{font-size:10px}.hour{min-width:55px;font-size:10px}.hour b{font-size:12px}.hourly{padding-top:5px}
 #map{height:200px}.radar-control{margin-top:7px}.rain-scale{margin-top:5px}.text-link{margin-top:8px;font-size:11px}.day-row{padding:7px 0;font-size:11px;grid-template-columns:55px 1fr 30px 30px 58px}.official .forecast-day{padding:6px 0;font-size:11px}.official .muted{font-size:10px}
 .link-grid{margin-top:10px;gap:7px}.link-grid a{padding:8px 10px;font-size:12px}.link-grid small{font-size:10px}#sources{grid-template-columns:repeat(2,1fr);gap:5px}.source{padding:4px 7px;font-size:10px}.source small{font-size:9px}.source small:last-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}footer{margin-top:12px;font-size:9px}
 .typhoon-item strong{font-size:17px}.typhoon-item{font-size:11px}.typhoon .footnote{line-height:1.6}
}
@media(min-width:1200px){
 #chart{height:103px}#map{height:140px}.official .forecast-day{line-height:1.35}.official .forecast-day p{margin:2px 0}.official .footnote{line-height:1.3}.link-grid{gap:6px}.link-grid a{padding:5px 9px}
}
@media(min-width:1200px){
 header{padding:10px 22px}h1{font-size:22px}.brand-icon{font-size:30px}.brand p{font-size:9px}.overview{padding:7px 0;font-size:12px}.warning.panel{padding:8px 14px}.warning small{font-size:10px}
 .grid{grid-template-rows:250px 330px 170px}.grid>section{min-height:0;overflow:auto}#chart{height:103px}#map{height:140px}.day-row{padding:5px 0}.weekly .footnote{line-height:1.3}.source{line-height:1.35}#sources{grid-template-columns:repeat(4,1fr)}.sources h2{font-size:12px}.link-grid a{padding:5px 9px}.section-top{margin-bottom:7px}.temp{font-size:48px}.condition{margin:7px 0 10px}
}