.weather-toolbar{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.weather-toolbar>button{min-height:44px;border:1px solid #adc6bc40;border-radius:10px;padding:8px 14px;font-size:14px;background:#10272e;color:var(--ink)}.weather-toolbar>button:first-child{color:var(--gold)}.weather-toolbar #weather-status{font-size:13px;color:var(--teal);border:0;background:transparent;padding:8px 0}.weather-toolbar [hidden],.weather-card[hidden],.weather-legend[hidden]{display:none!important}
.layers-panel{position:absolute;inset:10px auto auto 12px;margin:0;width:min(340px,calc(100% - 80px));max-height:min(480px,62dvh);padding:16px 18px;color:var(--ink);background:#0c252ef5;border:1px solid #b4d5c744;border-radius:16px;box-shadow:0 20px 50px #0008;overflow:auto;overscroll-behavior:contain;z-index:20;font-size:14px;animation:layer-appear .18s ease-out}.layers-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.layers-heading h2{font:500 27px 'Playfair Display',Georgia,serif;margin:0}.layers-heading button,.weather-card-head button{min-width:44px;min-height:44px;font-size:26px;border-radius:50%}.layers-panel section+section{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}.layers-panel h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:14px 0 8px}.layer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer}.layer-row input{appearance:none;width:38px;min-width:38px;height:23px;border-radius:20px;border:1px solid #728b8c;background:#233d46;position:relative;cursor:pointer;margin:0}.layer-row input:after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#d6e4df;transition:transform .16s}.layer-row input:checked{background:#d9b76d;border-color:#d9b76d}.layer-row input:checked:after{transform:translateX(15px);background:#10262c}.layer-hint{font-size:12px;color:#b2c7ca;line-height:1.55;margin:7px 0}.layer-hint a,.weather-meta a,.weather-legend a{color:inherit;text-underline-offset:3px}.weather-toggles{padding:0 0 7px}.weather-location{min-height:44px;color:var(--gold);width:100%;text-align:left;border-top:1px solid var(--line);padding:10px 0}.layer-base{display:flex;gap:6px;flex-wrap:wrap}.layer-base button{min-height:44px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;flex:1}.layer-base button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.layer-now{display:inline-block;padding:6px 14px;border-radius:20px;background:#85bcb51f;color:#a8d6cc}.layers-panel #weather-location-status{font-size:13px;line-height:1.4;color:var(--gold);margin:0}.layers-panel button:disabled{opacity:.55}
.weather-card{position:absolute;left:12px;bottom:64px;width:min(320px,calc(100% - 80px));max-height:min(280px,38dvh);overflow:auto;overscroll-behavior:contain;padding:10px 16px 12px;background:#0c252ef5;border:1px solid #a7c9c43b;border-radius:16px;box-shadow:0 14px 40px #0006;z-index:8;animation:layer-appear .18s ease-out}.weather-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.weather-card-head h3{font-size:16px;line-height:1.2;margin:0;overflow-wrap:anywhere}.weather-primary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.weather-primary>span:first-child{font-size:28px;color:var(--gold)}.weather-primary strong{font-size:30px;font-weight:500}.weather-primary>span:last-child{font-size:14px;flex-basis:100%}.weather-card p{font-size:13px;margin:7px 0;line-height:1.4}.weather-card summary{min-height:44px;padding:12px 0;font-size:14px;cursor:pointer;color:var(--gold)}.weather-card dl{margin:0}.weather-card dl div{display:flex;justify-content:space-between;gap:12px;margin:9px 0;font-size:14px}.weather-card dt small{display:block;font-size:12px}.weather-card dd{margin:0;white-space:nowrap}.weather-card .weather-meta{font-size:12px;color:#a7bec3}.weather-card #weather-retry{min-height:44px;color:var(--gold)}
.weather-legend{position:absolute;left:12px;top:10px;width:min(250px,calc(100% - 82px));padding:10px 12px;border-radius:10px;background:#071923dc;z-index:6;pointer-events:none}.weather-legend a{pointer-events:auto}.weather-legend p{font-size:13px;margin:0 0 6px}.weather-legend small{display:block;font-size:12px;color:#bdd0d0;line-height:1.4;margin-top:5px}.weather-scale{height:7px;border-radius:8px}.weather-scale.thermal{background:linear-gradient(90deg,#6746cb,#2774d1,#24bbbe,#e6b745,#db5331)}.weather-scale.rainfall{background:linear-gradient(90deg,#58ceda55,#4677dd,#ae46c7)}.weather-scale-labels{display:flex;justify-content:space-between;font-size:12px;padding-top:4px}.immersive .weather-toolbar{width:100%;pointer-events:auto}.immersive .layers-panel,.immersive .weather-legend{top:180px}.immersive .weather-card{bottom:90px;max-height:32dvh}.immersive:has(#guide:not([hidden])) .weather-card{bottom:auto;top:180px;left:auto;right:75px}.immersive:has(#guide:not([hidden])) .weather-legend{display:none}
@media(max-width:600px){.layers-panel{max-height:min(380px,56dvh);padding:10px 14px;width:calc(100% - 75px)}.weather-card{max-height:210px;bottom:60px;padding:8px 12px}.weather-legend{max-width:210px}.weather-legend small{font-size:12px}.weather-toolbar{gap:6px}.weather-toolbar>button{padding:8px 10px}.immersive .weather-legend,.immersive .layers-panel,.immersive:has(#guide:not([hidden])) .weather-card{top:190px}.immersive .weather-card{width:calc(100% - 90px)}}
@keyframes layer-appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.layers-panel,.weather-card{animation:none}.layer-row input:after{transition:none}}