.forecast-precipitation-card{container-type:inline-size;width:100%;max-width:100%;min-width:0;margin:0 auto 26px;overflow:hidden;border:1px solid #b9cbd7;border-radius:17px;background:#f8fbfc;box-shadow:inset 0 1px rgba(255,255,255,.88),0 10px 24px rgba(32,61,80,.09)}
.forecast-precipitation-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px 12px;border-bottom:1px solid #d5e1e8;background:linear-gradient(135deg,#f8fcfe 0%,#e7f0f5 100%)}
.forecast-precipitation-heading h2{margin:0;color:#183c52;font-size:1.05rem;letter-spacing:-.025em}
.forecast-precipitation-heading>span{flex:none;padding:5px 8px;border:1px solid #bad1df;border-radius:999px;background:rgba(255,255,255,.7);color:#38647c;font-size:.65rem;font-weight:800;white-space:nowrap}
.forecast-precipitation-canvas{position:relative;height:min(248px,calc(183.53px + 5.6555cqw));overflow:hidden;background:#d9e6ed}
.forecast-precipitation-map{position:absolute;inset:0;min-width:0}
.forecast-precipitation-map .maplibregl-canvas{outline:none}
.forecast-precipitation-marker{width:17px;height:17px;border:3px solid #fff;border-radius:50% 50% 50% 0;background:#1e766c;box-shadow:0 2px 9px rgba(4,31,44,.58),0 0 0 4px rgba(178,244,228,.35);transform:rotate(-45deg)}
.forecast-precipitation-marker::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#f7d475}
.forecast-precipitation-status{position:absolute;right:10px;bottom:10px;max-width:calc(100% - 20px);margin:0;padding:5px 8px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(10,35,50,.74);color:#edf9ff;font-size:.59rem;font-weight:700;line-height:1.2;box-shadow:0 3px 10px rgba(0,0,0,.16);backdrop-filter:blur(7px)}
.forecast-precipitation-status:empty{display:none}
.forecast-precipitation-expand{position:absolute;z-index:4;right:10px;bottom:10px;display:grid;width:38px;height:38px;min-height:0;padding:0;place-items:center;border:1px solid rgba(61,93,110,.38);border-radius:11px;background:rgba(248,252,254,.88);color:#214f66;box-shadow:0 4px 13px rgba(17,48,66,.2),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(7px);cursor:pointer;transform:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.forecast-precipitation-expand:hover,.forecast-precipitation-expand:focus-visible{border-color:#4f8298;background:rgba(255,255,255,.97);box-shadow:0 5px 16px rgba(17,48,66,.25),0 0 0 3px rgba(130,183,205,.2);transform:none}
.forecast-precipitation-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.forecast-precipitation-collapse-icon{display:none}
.forecast-precipitation-card.is-expanded .forecast-precipitation-canvas{height:min(496px,calc(367.06px + 11.311cqw))}
.forecast-precipitation-card.is-expanded .forecast-precipitation-expand-icon{display:none}
.forecast-precipitation-card.is-expanded .forecast-precipitation-collapse-icon{display:block}
.forecast-precipitation-canvas{transition:height .3s ease}
.forecast-precipitation-status:not(:empty){right:58px}
.forecast-precipitation-legend{position:absolute;left:10px;bottom:10px;display:grid;grid-template-columns:repeat(5,auto);gap:3px 7px;align-items:end;padding:7px 9px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(248,252,254,.85);color:#314f61;box-shadow:0 3px 10px rgba(17,48,66,.13);backdrop-filter:blur(7px)}
.forecast-precipitation-legend span{grid-column:1/-1;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(137,205,245,.35) 0 20%,#89cdf5 20% 40%,#3285e6 40% 60%,#6849cd 60% 80%,#40197e 80%)}
.forecast-precipitation-legend small{font-size:.48rem;font-weight:750;white-space:nowrap}
.forecast-precipitation-timeline{display:grid;gap:7px;padding:10px 13px 9px;border-top:1px solid #d6e2e8;background:linear-gradient(180deg,#fff 0%,#f8fbfc 100%)}
.forecast-precipitation-timeline-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.forecast-precipitation-timeline button{display:grid;min-height:34px;padding:5px 10px;place-items:center;border:1px solid #b8ccd8;border-radius:9px;background:#edf5f8;color:#21536f;font-size:.65rem;font-weight:850;box-shadow:inset 0 1px rgba(255,255,255,.86);transform:none}
.forecast-precipitation-timeline button:hover:not(:disabled),.forecast-precipitation-timeline button:focus-visible{border-color:#719bb0;background:#dfeef4;box-shadow:0 0 0 3px rgba(85,146,174,.15),inset 0 1px rgba(255,255,255,.9);transform:none}
.forecast-precipitation-timeline button:disabled{opacity:.38;cursor:not-allowed}
.forecast-precipitation-now{min-width:68px}
.forecast-precipitation-now.is-active{border-color:#62a69f;background:#dff2ee;color:#176b65}
.forecast-precipitation-selected-time{display:flex;min-width:0;align-items:center;justify-content:center;gap:9px;color:#173f56;font-variant-numeric:tabular-nums;text-align:left}
.forecast-precipitation-selected-time strong{font-size:1.16rem;font-weight:900;line-height:1;letter-spacing:.025em}
.forecast-precipitation-selected-time>span{display:grid;gap:1px;min-width:0}
.forecast-precipitation-selected-time b{overflow:hidden;font-size:.69rem;font-weight:850;line-height:1.15;text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap}
.forecast-precipitation-selected-time small{color:#647c8b;font-size:.54rem;font-weight:750;line-height:1.15;white-space:nowrap}
.forecast-precipitation-step{padding:5px 8px;border:1px solid #d1dee5;border-radius:999px;background:#fff;color:#637b89;font-size:.56rem;font-weight:800;white-space:nowrap}
.forecast-precipitation-scrubber{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:start;gap:9px}
.forecast-precipitation-step-button{width:36px;height:36px;min-height:36px!important;padding:0!important}
.forecast-precipitation-step-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.forecast-precipitation-track{display:grid;gap:1px;min-width:0;padding-top:3px}
.forecast-precipitation-timeline input{--timeline-progress:0%;position:relative;z-index:2;appearance:none;width:100%;min-width:0;height:22px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.forecast-precipitation-timeline input::-webkit-slider-runnable-track{height:7px;border:1px solid #bbccd5;border-radius:999px;background:linear-gradient(90deg,#238f89 0 var(--timeline-progress),#d9e4e9 var(--timeline-progress) 100%);box-shadow:inset 0 1px 2px rgba(31,60,77,.12)}
.forecast-precipitation-timeline input::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-7px;border:3px solid #fff;border-radius:50%;background:#168b86;box-shadow:0 0 0 1px #37798a,0 3px 7px rgba(24,76,91,.28)}
.forecast-precipitation-timeline input::-moz-range-track{height:5px;border:1px solid #bbccd5;border-radius:999px;background:#d9e4e9;box-shadow:inset 0 1px 2px rgba(31,60,77,.12)}
.forecast-precipitation-timeline input::-moz-range-progress{height:5px;border-radius:999px;background:#238f89}
.forecast-precipitation-timeline input::-moz-range-thumb{width:15px;height:15px;border:3px solid #fff;border-radius:50%;background:#168b86;box-shadow:0 0 0 1px #37798a,0 3px 7px rgba(24,76,91,.28)}
.forecast-precipitation-timeline input:focus-visible{outline:none}
.forecast-precipitation-timeline input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px #37798a,0 0 0 5px rgba(57,145,164,.2),0 3px 7px rgba(24,76,91,.28)}
.forecast-precipitation-days{position:relative;z-index:1;height:30px;margin:0 9px;color:#667d8a;font-variant-numeric:tabular-nums}
.forecast-precipitation-day{position:absolute;top:0;left:var(--day-position);font-size:.5rem;font-weight:800;line-height:1;letter-spacing:.025em;white-space:nowrap;transform:translateX(-50%)}
.forecast-precipitation-day::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;width:1px;height:5px;background:#90a8b5}
.forecast-precipitation-hour{position:absolute;top:16px;left:var(--hour-position);color:#527487;font-size:.52rem;font-weight:800;line-height:1;letter-spacing:.02em;white-space:nowrap;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.forecast-precipitation-hour::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;width:1px;height:4px;background:#90a8b5}
.forecast-precipitation-day[data-edge="start"]{transform:none}
.forecast-precipitation-day[data-edge="start"]::before{left:0}
.forecast-precipitation-day[data-edge="end"]{transform:translateX(-100%)}
.forecast-precipitation-day[data-edge="end"]::before{right:0;left:auto}
@media(max-width:640px){.forecast-precipitation-card{margin-bottom:20px;border-radius:14px}.forecast-precipitation-heading{padding:10px 12px}.forecast-precipitation-heading h2{font-size:.96rem}.forecast-precipitation-heading>span{padding:4px 7px;font-size:.58rem}.forecast-precipitation-expand{display:none}.forecast-precipitation-legend{right:8px;bottom:8px;left:auto;gap:2px 5px;padding:6px 7px}.forecast-precipitation-legend small{font-size:.42rem}.forecast-precipitation-status,.forecast-precipitation-status:not(:empty){top:8px;right:8px;bottom:auto;font-size:.54rem}.forecast-precipitation-timeline{gap:6px;padding:8px 9px 7px}.forecast-precipitation-timeline-summary{grid-template-columns:auto minmax(0,1fr);gap:8px}.forecast-precipitation-timeline button{min-height:32px;font-size:.6rem}.forecast-precipitation-now{min-width:62px}.forecast-precipitation-step{display:none}.forecast-precipitation-selected-time{justify-content:flex-end;gap:7px}.forecast-precipitation-selected-time strong{font-size:1.02rem}.forecast-precipitation-selected-time b{font-size:.61rem}.forecast-precipitation-selected-time small{font-size:.49rem}.forecast-precipitation-scrubber{grid-template-columns:33px minmax(0,1fr) 33px;gap:6px}.forecast-precipitation-step-button{width:33px;height:33px;min-height:33px!important}.forecast-precipitation-days{margin:0 7px}.forecast-precipitation-day{font-size:.45rem}.forecast-precipitation-hour{top:15px;font-size:.45rem}.forecast-precipitation-day:first-child{display:none}}
