.fdPage[data-period="hourly"] .fdTabs:before{left:0;width:calc((100% - 15px)*.83/3.66);transform:none}.hrHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border-radius:19px;margin:0 0 5px}.hrHeading h2{font-size:15px;font-weight:500;margin:0}.hrHeading>span{font-size:10px;white-space:nowrap}.hrCells{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;position:relative;padding:2px 0 7px;margin-bottom:2px}.hrCell{flex:0 0 calc((100% - 21px)/8);min-width:43px;min-height:103px;border-radius:17px;padding:10px 1px;display:flex;align-items:center;flex-direction:column;justify-content:space-between;gap:8px;color:white;font-size:11px}.hrCell .weatherIcon{width:34px;height:36px}.hrCell b{font-size:17px;font-weight:500}.citySearchPage .hrCell[aria-pressed=true]{border-color:#b8f4ff;background:linear-gradient(115deg,#0094e0a8,#137ca577,#5fc6ed70);box-shadow:inset 0 0 9px #72d8ff77,0 0 9px #21bfff88}.hrDetailCard{border-radius:24px;padding:13px 12px 9px;margin-bottom:10px}.hrDetailTop{display:grid;grid-template-columns:1.1fr .8fr 1.5fr 1fr;align-items:center;gap:8px;padding-bottom:11px}.hrDetailTop strong{display:block;font-size:25px;font-weight:600;white-space:nowrap}.hrDetailTop small{display:block;font-size:10px;line-height:1.4;margin-top:4px}.hrDetailTop>.weatherIcon{width:53px;height:57px}.hrCondition{font-size:11px;line-height:1.4}.hrStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 0;border-top:1px solid #dcefff33;border-bottom:1px solid #dcefff33;gap:6px}.hrStats>div{display:flex;align-items:center;gap:6px;font-size:9px;min-width:0}.hrStats>div+div{border-left:1px solid #daeaff30;padding-left:6px}.hrStats b{display:block;font-size:10px;font-weight:500;margin-top:2px}.hrStats .icon,.hrMetricIcon{width:17px;height:22px;flex:none;font-size:22px}.hrChartTitle{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:12px;font-weight:400}.hrChartTitle .icon{color:#3acfff;width:18px;height:22px}.hrPlotScroll,.hrRainScroll{overflow-x:auto;scrollbar-width:none}.hrPlotScroll svg{display:block;max-width:none;font-size:11px;font-family:inherit;overflow:visible}.hrPoint{filter:drop-shadow(0 0 5px var(--point-color))}.hrPlotScroll g{cursor:pointer}.hrPlotScroll g:focus-visible circle{stroke:white;stroke-width:3}.hrScale{font-size:9px;color:#d4e3eccc;margin-top:-4px;border-bottom:1px solid #dcefff33;padding-bottom:7px}.hrRainTrack{display:flex}.hrRainTrack button{width:60px;flex:none;background:none;border:0;color:inherit;font-size:11px;padding:4px 10px;min-height:62px}.hrBarSpace{height:35px;display:flex;align-items:flex-end;margin-bottom:5px}.hrBarSpace i{display:block;width:100%;background:linear-gradient(#38caff,#1b8bc2a0);border-radius:4px;box-shadow:inset 0 1px 0 #abecff66;min-height:0}.hrRainTrack [aria-pressed=true]{background:#26bcff15;border-radius:5px}.hrRainTrack [aria-pressed=true] i{box-shadow:0 0 9px #35cfff88}.hrDetailCard [data-hour]{touch-action:pan-x pan-y}.hrFoot{font-size:10px;text-align:center;color:#cfdee8}
@media(min-width:480px){.hrCell{min-height:116px;font-size:13px}.hrCell .weatherIcon{width:43px;height:44px}.hrCell b{font-size:21px}.hrHeading h2{font-size:18px}.hrHeading>span{font-size:12px}.hrDetailTop strong{font-size:31px}.hrDetailTop small,.hrCondition{font-size:12px}.hrDetailTop>.weatherIcon{width:65px;height:65px}.hrStats>div{font-size:11px}.hrStats b{font-size:12px}.hrStats .icon{width:22px}.hrChartTitle{font-size:14px}}
@media(max-width:359px){.hrDetailTop{gap:4px}.hrDetailTop strong{font-size:21px}.hrDetailTop>.weatherIcon{width:40px}.hrCondition{font-size:9px}.hrStats>div{gap:3px}.hrStats .icon,.hrMetricIcon{width:13px}.hrHeading h2{font-size:13px}}
/* One-screen hourly layout: size sections against the available browser height. */
.fdPage[data-period="hourly"]{height:100dvh;min-height:0;overflow:clip}
.fdPage[data-period="hourly"] .fdContent{height:100%;display:grid;grid-template-rows:4.5% 6.5% 5.5% 18% minmax(0,1fr) 6.5%;gap:4px;padding:6px 12px;position:relative;min-height:0}
.fdPage[data-period="hourly"] .topbar{height:100%;min-height:0;padding:0 4px}.fdPage[data-period="hourly"] .brand{font-size:19px}.fdPage[data-period="hourly"] .iconButton{height:32px;width:36px;padding:6px}
.fdPage[data-period="hourly"] .fdLocation{margin:0 3px;gap:12px;min-height:0;align-items:center}.fdPage[data-period="hourly"] .citySearchBack{height:34px;width:34px;font-size:28px}.fdPage[data-period="hourly"] .fdLocation strong{font-size:18px}.fdPage[data-period="hourly"] .fdLocation small{font-size:11px;margin-top:2px}
.fdPage[data-period="hourly"] .fdTabs{margin:0;min-height:0}.fdPage[data-period="hourly"] .fdTabs>a,.fdPage[data-period="hourly"] .fdTabs>button{min-height:0;padding:3px;font-size:12px}
.fdPage[data-period="hourly"] .fdHero{min-height:0;margin:0;padding:6px 7px;border-radius:20px;overflow:hidden}.fdPage[data-period="hourly"] .fdHeroTemp>.weatherIcon{height:clamp(32px,7dvh,65px);width:76px}.fdPage[data-period="hourly"] .fdHeroTemp>strong{font-size:clamp(27px,5dvh,40px)}.fdPage[data-period="hourly"] .fdHeroTemp>small{font-size:9px;margin:0}.fdPage[data-period="hourly"] .fdHeroMiddle{padding:0 7px}.fdPage[data-period="hourly"] .fdHeroMiddle h2{font-size:17px;margin:0 0 4px}.fdPage[data-period="hourly"] .fdHeroMiddle p{font-size:10px}.fdPage[data-period="hourly"] .fdCondition{font-size:11px;padding:5px 0;margin:4px 0}.fdPage[data-period="hourly"] .fdHeroStats{font-size:9px;gap:6px}.fdPage[data-period="hourly"] .fdSunTimes{font-size:9px;gap:4px}
#hrRoot{display:grid;grid-template-rows:7% 24% minmax(0,1fr);gap:4px;min-width:0;min-height:0;overflow:clip}.hrHeading{margin:0;padding:2px 10px;min-height:0}.hrHeading h2{font-size:clamp(11px,2.9vw,15px)}.hrHeading>span{font-size:9px}
.hrCells{width:100%;max-width:100%;min-width:0;min-height:0;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;contain:inline-size;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:3px}.hrCell{box-sizing:border-box;flex:0 0 calc((100% - 21px)/8);min-width:0;min-height:0;height:100%;padding:5px 0;gap:2px;border-radius:13px;scroll-snap-align:start;font-size:10px}.hrCell .weatherIcon{width:clamp(23px,7vw,36px);height:clamp(23px,4.5dvh,36px)}.hrCell b{font-size:clamp(13px,3.4vw,19px)}
.hrDetailCard{min-height:0;min-width:0;display:grid;grid-template-rows:auto 18px minmax(0,1fr) 18px 38px;margin:0;padding:7px 10px 5px;overflow:hidden;border-radius:20px}.hrDetailTop{padding-bottom:5px;gap:5px;grid-template-columns:1.05fr .75fr 1.4fr 1fr}.hrDetailTop strong{font-size:clamp(19px,3.5dvh,28px)}.hrDetailTop small{font-size:9px;margin-top:2px;line-height:1.2}.hrDetailTop>.weatherIcon{width:45px;height:36px}.hrCondition{font-size:10px}.hrStats{padding:5px 0;gap:4px}.hrStats>div{font-size:8px;gap:4px}.hrStats b{font-size:9px;margin-top:1px}.hrStats .icon,.hrMetricIcon{width:15px;height:18px;font-size:18px}.hrChartTitle{margin:0;font-size:10px;gap:5px;line-height:18px}.hrChartTitle .icon{height:16px;width:15px}
#hrChart,#hrRain{min-width:0;min-height:0;overflow:hidden}.hrPlotScroll{height:100%;min-width:0}.hrPlotScroll svg{height:100%!important;font-size:15px}.hrScale{display:none}.hrRainScroll,.hrRainTrack{height:100%}.hrRainTrack button{min-height:0;height:100%;padding:0 8px;font-size:10px}.hrBarSpace{height:23px;margin-bottom:2px}
.fdPage[data-period="hourly"] .fdActions{min-height:0}.fdPage[data-period="hourly"] .fdActions>a,.fdPage[data-period="hourly"] .fdActions>button{height:100%;min-height:0;padding:3px 5px;border-radius:18px}.hrFoot{display:none}.fdPage[data-period="hourly"] .cityMenu{position:absolute;top:40px;right:12px;z-index:20}.fdPage[data-period="hourly"] .weatherWorld{overflow:hidden}
@media(max-height:620px){.fdPage[data-period="hourly"] .fdContent{gap:3px;padding-top:4px;padding-bottom:4px}.fdPage[data-period="hourly"] .fdHeroStats{gap:4px;font-size:8px}.fdPage[data-period="hourly"] .fdLocation small{margin-top:0}.hrDetailCard{grid-template-rows:auto 15px minmax(0,1fr) 15px 29px;padding:5px 8px}.hrStats{padding:3px 0}.hrDetailTop{padding-bottom:3px}.hrDetailTop>.weatherIcon{height:27px;width:35px}.hrDetailTop strong{font-size:19px}.hrDetailTop small{font-size:8px}.hrStats b{font-size:8px}.hrBarSpace{height:16px}.hrChartTitle{font-size:9px;line-height:15px}}