/* Two-day international forecast cards and self-drawn CSS weather icons. */
.today-outlook{margin:12px 0 18px;padding:22px;background:linear-gradient(135deg,#f9fcff,#f1f8fb 55%,#f7fbfd);border:1px solid #dfebf1;border-radius:18px;box-shadow:0 10px 28px #193c550a}
.today-outlook-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.today-outlook-heading h2{margin:4px 0 0;color:#14324a;font-size:22px;letter-spacing:-.03em}.outlook-kicker{color:#168395;font-size:10px;font-weight:800;letter-spacing:.17em}.outlook-units{padding-bottom:3px;color:#7d919e;font-size:12px}
.outlook-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.outlook-card{position:relative;min-width:0;overflow:hidden;padding:19px 21px 15px;background:#fff;border:1px solid #e5edf2;border-radius:14px;box-shadow:0 5px 18px #23445b0a}.outlook-card:before{position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#27a2c2,#87d0df);content:""}.outlook-card:nth-child(2):before{background:linear-gradient(#f2b856,#f08d61)}
.outlook-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.outlook-card-top time,.outlook-day{display:block}.outlook-day{margin-bottom:3px;color:#147f91;font-size:12px;font-weight:750;letter-spacing:.04em}.outlook-card:nth-child(2) .outlook-day{color:#cf7b39}.outlook-card-top time{color:#8293a0;font-size:12px}.outlook-weather{max-width:52%;padding:6px 10px;border-radius:99px;background:#eff8fa;color:#3c6877;font-size:12px;font-weight:650;text-align:right}.outlook-card:nth-child(2) .outlook-weather{background:#fff6e9;color:#8c6842}
.outlook-main{display:flex;align-items:center;gap:16px;min-height:100px;padding:6px 0 2px}.wx-icon{position:relative;display:block;flex:0 0 78px;width:78px;height:68px}.wx-icon:before,.wx-icon:after,.wx-icon i{position:absolute;display:block;content:""}.wx-icon.sunny:before{top:12px;left:17px;width:39px;height:39px;border-radius:50%;background:#ffc34f;box-shadow:0 0 0 8px #fff1cd,0 7px 20px #f3b94930}.wx-icon.partly-cloudy:before{top:1px;right:5px;width:30px;height:30px;border-radius:50%;background:#ffc34f;box-shadow:0 0 0 6px #fff3d6}
.wx-icon.partly-cloudy:after,.wx-icon.cloudy:before,.wx-icon.showers:before,.wx-icon.rain:before,.wx-icon.thunderstorm:before,.wx-icon.sleet:before,.wx-icon.snow:before{z-index:1;bottom:8px;left:5px;width:68px;height:36px;border-radius:28px;background:radial-gradient(circle at 25% 55%,#fff 0 15px,transparent 15.7px),radial-gradient(circle at 51% 32%,#fff 0 20px,transparent 20.7px),radial-gradient(circle at 76% 58%,#fff 0 14px,transparent 14.7px),linear-gradient(transparent 48%,#fff 49% 100%);filter:drop-shadow(0 3px 1px #9cb9c8)}
.wx-icon.showers:after,.wx-icon.rain:after,.wx-icon.sleet:after{z-index:2;bottom:0;left:17px;width:5px;height:13px;border-radius:0 0 5px 5px;background:#4da7d7;transform:rotate(22deg);box-shadow:16px 4px #4da7d7,32px -1px #4da7d7,48px 3px #4da7d7}.wx-icon.thunderstorm:after{z-index:2;bottom:-1px;left:34px;width:16px;height:24px;background:#f5ba38;clip-path:polygon(48% 0,100% 0,66% 42%,100% 42%,22% 100%,42% 55%,0 55%)}
.wx-icon.snow:after,.wx-icon.sleet i{z-index:2;bottom:0;left:20px;width:7px;height:7px;border-radius:50%;background:#55a9d8;box-shadow:15px 5px #55a9d8,30px -1px #55a9d8,43px 6px #55a9d8}.wx-icon.sleet:after{background:#56a8d8;box-shadow:16px 4px #56a8d8,32px -1px #56a8d8,48px 3px #56a8d8}.wx-icon.fog:before,.wx-icon.haze:before{top:15px;left:10px;width:58px;height:38px;border-radius:50%;background:#c5d8e2}.wx-icon.fog:after,.wx-icon.haze:after{z-index:2;top:31px;left:8px;width:62px;height:5px;border-radius:5px;background:#7393a5;box-shadow:7px 12px #9cb2be,-3px 24px #c1d1d8}.wx-icon.dust:before{top:14px;left:12px;width:54px;height:38px;border-radius:50%;background:#d6b776;box-shadow:0 8px 20px #d6b77650}.wx-icon.dust:after{top:31px;left:3px;width:70px;height:4px;border-radius:4px;background:#b89760;box-shadow:5px 11px #c9ac75,-2px 22px #ddc99d}
.wx-icon.cloudy:before{background:radial-gradient(circle at 25% 55%,#d5e0e6 0 15px,transparent 15.7px),radial-gradient(circle at 51% 32%,#d5e0e6 0 20px,transparent 20.7px),radial-gradient(circle at 76% 58%,#d5e0e6 0 14px,transparent 14.7px),linear-gradient(transparent 48%,#d5e0e6 49% 100%)}.wx-icon.overcast:before{background:radial-gradient(circle at 25% 55%,#aebfc9 0 15px,transparent 15.7px),radial-gradient(circle at 51% 32%,#aebfc9 0 20px,transparent 20.7px),radial-gradient(circle at 76% 58%,#aebfc9 0 14px,transparent 14.7px),linear-gradient(transparent 48%,#aebfc9 49% 100%)}
.outlook-temps{display:flex;align-items:baseline;gap:2px}.outlook-temps strong{color:#17354c;font-size:52px;font-weight:350;letter-spacing:-.07em;line-height:1}.outlook-temps sup{position:relative;top:-.7em;color:#17354c;font-size:21px}.outlook-temps>span,.outlook-low span{margin-left:4px;color:#9aabb5;font-size:9px;font-weight:800;letter-spacing:.1em}.outlook-low{display:flex;align-items:baseline;margin-left:auto;color:#718795}.outlook-low b{font-size:18px;font-weight:550}.outlook-night{margin:0 0 11px 94px;color:#778b98;font-size:12px}.outlook-card-foot{display:flex;align-items:center;gap:8px;min-height:34px;padding-top:10px;border-top:1px solid #edf2f5;color:#607986;font-size:12px}.wind-mark{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#edf7f9;color:#25879a;font-size:14px}.outlook-card-foot a{margin-left:auto;color:#147f91;text-decoration:none;font-weight:700;white-space:nowrap}.outlook-card-foot a:hover{color:#095e6b}.outlook-card-foot a b{padding-left:3px}
@media(max-width:700px){.today-outlook{padding:17px 14px;border-radius:14px}.outlook-cards{grid-template-columns:1fr}.outlook-card{padding:16px}.outlook-main{min-height:88px;gap:11px}.wx-icon{flex-basis:68px;transform:scale(.9);transform-origin:left center}.outlook-temps strong{font-size:46px}.outlook-night{margin-left:78px}}
@media(prefers-reduced-motion:no-preference){.outlook-card{transition:transform .18s ease,box-shadow .18s ease}.outlook-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #193c5515}}
.wx-icon.overcast:before{z-index:1;position:absolute;display:block;content:"";bottom:8px;left:5px;width:68px;height:36px;border-radius:28px;background:radial-gradient(circle at 25% 55%,#aebfc9 0 15px,transparent 15.7px),radial-gradient(circle at 51% 32%,#aebfc9 0 20px,transparent 20.7px),radial-gradient(circle at 76% 58%,#aebfc9 0 14px,transparent 14.7px),linear-gradient(transparent 48%,#aebfc9 49% 100%);filter:drop-shadow(0 3px 1px #9cb9c8)}
.wx-icon.night-clear:before{top:8px;left:17px;width:42px;height:42px;border-radius:50%;background:#8bb9d3;box-shadow:0 0 0 7px #e2f1f5}.wx-icon.night-clear:after{top:1px;left:7px;width:42px;height:42px;border-radius:50%;background:#fff}.wx-icon.night-partly-cloudy:before{top:7px;right:7px;width:34px;height:34px;border-radius:50%;background:#8bb9d3;box-shadow:0 0 0 6px #e2f1f5}.wx-icon.night-partly-cloudy:after{z-index:1;bottom:8px;left:5px;width:68px;height:36px;border-radius:28px;background:radial-gradient(circle at 25% 55%,#fff 0 15px,transparent 15.7px),radial-gradient(circle at 51% 32%,#fff 0 20px,transparent 20.7px),radial-gradient(circle at 76% 58%,#fff 0 14px,transparent 14.7px),linear-gradient(transparent 48%,#fff 49% 100%);filter:drop-shadow(0 3px 1px #9cb9c8)}
/* Storybook icon palette: stronger silhouettes and distinct conditions. */
.wx-icon.rain:before,.wx-icon.showers:before{background:radial-gradient(circle at 25% 55%,#91c8dc 0 15px,transparent 15.8px),radial-gradient(circle at 51% 32%,#a9d9e8 0 20px,transparent 20.8px),radial-gradient(circle at 76% 58%,#82bad1 0 14px,transparent 14.8px),linear-gradient(transparent 48%,#8fc5da 49% 100%);filter:drop-shadow(0 4px 0 #4d839c) drop-shadow(0 7px 5px #315f7430)}
.wx-icon.rain:after,.wx-icon.showers:after{width:6px;height:15px;border-radius:5px;background:#198ed0;box-shadow:17px 5px #28a5e5,34px -1px #167fbd,51px 4px #28a5e5}
.wx-icon.cloudy:before{background:radial-gradient(circle at 25% 55%,#d8edf5 0 15px,transparent 15.8px),radial-gradient(circle at 51% 32%,#e8f6fa 0 20px,transparent 20.8px),radial-gradient(circle at 76% 58%,#c8e2ed 0 14px,transparent 14.8px),linear-gradient(transparent 48%,#d5ebf3 49% 100%);filter:drop-shadow(0 4px 0 #86b1c3) drop-shadow(0 7px 5px #4d7b8f24)}
.wx-icon.cloudy:after{z-index:0;top:1px;right:2px;width:28px;height:28px;border-radius:50%;background:#ffc857;box-shadow:0 0 0 6px #fff0b8,0 4px 8px #dca93830}
.wx-icon.overcast:before{z-index:2;background:radial-gradient(circle at 25% 55%,#91aab7 0 15px,transparent 15.8px),radial-gradient(circle at 51% 32%,#a7bdc7 0 20px,transparent 20.8px),radial-gradient(circle at 76% 58%,#839eab 0 14px,transparent 14.8px),linear-gradient(transparent 48%,#8fa8b4 49% 100%);filter:drop-shadow(0 4px 0 #607f8e) drop-shadow(0 7px 5px #35586830)}
.wx-icon.overcast:after{z-index:1;top:3px;left:19px;width:51px;height:29px;border-radius:24px;background:radial-gradient(circle at 25% 58%,#c4d3da 0 11px,transparent 11.8px),radial-gradient(circle at 52% 35%,#d0dce2 0 15px,transparent 15.8px),radial-gradient(circle at 78% 60%,#b5c8d1 0 10px,transparent 10.8px),linear-gradient(transparent 48%,#becfd7 49% 100%);filter:drop-shadow(0 3px 0 #809ba8)}
.wx-icon.sunny:after{border-bottom-width:2px;border-bottom-color:#98652c;background:radial-gradient(circle at 5% 65%,#f09a78 0 2.5px,transparent 2.8px),radial-gradient(circle at 95% 65%,#f09a78 0 2.5px,transparent 2.8px),radial-gradient(circle at 22% 18%,#8a682f 0 1.5px,transparent 1.9px),radial-gradient(circle at 78% 18%,#8a682f 0 1.5px,transparent 1.9px)}