:root{--sky-brightness:1.035;--sky-saturation:1.02;--sky-wash:rgba(255,249,222,.02)}
body[data-sky=cloudy]{--sky-brightness:.92;--sky-saturation:.82;--sky-wash:rgba(68,78,89,.025)}
body[data-sky=rain]{--sky-brightness:.91;--sky-saturation:.82;--sky-wash:rgba(57,74,91,.03)}
body[data-ambience=off]{--sky-brightness:1;--sky-saturation:1;--sky-wash:transparent}
#map .maplibregl-canvas{filter:brightness(var(--sky-brightness)) saturate(var(--sky-saturation));transition:filter .8s ease}
#weather-wash{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--sky-wash);transition:background .8s ease}
#weather-rain{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s ease}
body[data-sky=rain]:not([data-ambience=off]) #weather-rain{opacity:1}
.mode,.map-title{display:none}
.weather-card{position:absolute;right:28px;top:28px;z-index:6;width:308px;background:#fff9ec;color:#4d391e;border-radius:14px;box-shadow:0 7px 30px #5c4c2925;padding:17px 20px 12px}
.weather-location{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#6d593d}
.weather-location>span:first-child{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-location>span:last-child{white-space:nowrap;font-size:11px;color:#796547}
.weather-now{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:17px 0 16px}
.weather-condition{display:flex;align-items:center;gap:10px}
.weather-condition svg{width:32px;height:32px;stroke:#a47329;stroke-width:1.45}
body[data-sky=cloudy] .weather-condition svg,body[data-sky=rain] .weather-condition svg{stroke:#6c786e}
.weather-condition strong{font-size:24px;font-weight:500;line-height:1.2}
.weather-temperatures{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:4px;text-align:right}
.weather-temperatures strong{font:400 29px/1.1 "Segoe UI",sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.weather-temperatures>span{font-size:14px}
.weather-temperatures small{grid-column:1/3;margin-top:5px;font-size:10px;color:#796547}
.blue-hours{border-top:1px solid #e6dcc8;padding-top:12px;font-size:11px}
.blue-label{display:flex;gap:7px;align-items:center;color:#52687c}
.blue-label svg{width:17px;height:17px;stroke-width:1.4}
.blue-label small{font-size:10px;color:#7b7b70;margin-left:auto}
.blue-hours>div{display:flex;justify-content:space-between;gap:10px;margin-top:7px}
.blue-hours>div>span{color:#766a54}
.blue-hours b{font-size:12px;color:#4d5f72;font-weight:500;font-variant-numeric:tabular-nums}
.weather-note{font-size:9px;color:#796547;margin-top:11px;line-height:1.5}
#decision-summary{top:266px;right:28px;width:308px}




.preview-separator{height:18px;width:1px;background:#e0d3b8;margin:0 3px}
#ambience-toggle{color:#796547;font-size:11px}
@media(max-width:1150px) and (min-width:601px){.filters{left:328px;right:366px;top:28px;transform:none;justify-content:center}.filters button{padding:8px 9px}.filters svg{display:none}}
@media(max-width:900px) and (min-width:601px){.weather-card{width:264px;right:20px}.filters{left:315px;right:315px;top:225px;min-width:350px;transform:translateX(-50%)}#decision-summary{width:264px;right:20px}}
@media(max-width:600px){
 .identity{width:130px;top:14px;left:14px;padding:13px 12px 10px}
 .brand{gap:7px}.brand svg{width:22px;height:22px}.brand>span{font-size:25px;letter-spacing:1px}.brand small{display:none}
 .identity nav{margin-top:12px;font-size:10px;gap:0}.identity nav a,.identity nav span{padding:7px 4px;white-space:nowrap}
 .weather-card{top:14px;right:14px;width:calc(100% - 170px);padding:12px 13px 9px;border-radius:12px}
 .weather-location{font-size:10px;gap:6px}.weather-location>span:last-child{font-size:9px}
 .weather-now{margin:11px 0 10px;gap:9px}.weather-condition{gap:6px}.weather-condition svg{width:22px;height:22px}.weather-condition strong{font-size:19px}
 .weather-temperatures strong{font-size:22px}.weather-temperatures>span{font-size:11px}.weather-temperatures small{font-size:8px;margin-top:3px}
 .blue-hours{padding-top:8px;font-size:10px}.blue-label{gap:5px}.blue-label svg{width:14px;height:14px}.blue-label small{font-size:9px}
 .blue-hours>div{display:block;margin-top:3px}.blue-hours>div>span{display:flex;justify-content:space-between;margin-top:2px}.blue-hours b{font-size:11px}
 .weather-note{font-size:8px;margin-top:7px}
 .search-panel{top:210px}.filters{top:268px;left:14px}
 
 
 
 #ambience-toggle{font-size:10px}
 #decision-summary{top:auto;right:14px;bottom:88px;width:calc(100% - 28px);font-size:12px}
 .place-card{bottom:152px;max-height:42svh}
 .map-controls{bottom:156px}
}
@media(prefers-reduced-motion:reduce){#map .maplibregl-canvas,#weather-rain,#weather-wash{transition:none}}


body[data-sky=night]{--sky-brightness:.9;--sky-saturation:.8;--sky-wash:rgba(49,65,85,.025)}
body[data-sky=snow]{--sky-brightness:.97;--sky-saturation:.85;--sky-wash:rgba(218,230,235,.025)}
.weather-note{display:flex;justify-content:space-between;gap:8px;align-items:center}
.weather-note button{background:transparent;min-height:26px;padding:2px 0 2px 8px;font-size:10px;color:var(--muted)}
.weather-card[data-state=unavailable] .weather-now{color:#796547}
@media(max-width:600px){
  #decision-summary{bottom:76px}
  .place-card{bottom:140px}
  .weather-note{align-items:start}
  .weather-note button{white-space:nowrap;font-size:9px;min-height:24px}
}

/* Compact phone weather: preserve conditions, range and both blue-hour windows. */
@media(max-width:600px){
 .weather-card{width:min(206px,calc(100% - 164px));padding:9px 10px 7px}
 .weather-location{font-size:10px;line-height:1.3}
 .weather-location>span:first-child{max-width:100%}
 .weather-location>span:last-child,.weather-temperatures small{display:none}
 .weather-now{margin:7px 0 6px;gap:6px}
 .weather-condition{gap:5px}
 .weather-condition svg{width:20px;height:20px}
 .weather-condition strong{font-size:17px}
 .weather-temperatures strong{font-size:21px}
 .weather-temperatures>span{font-size:10px}
 .blue-hours{padding-top:5px}
 .blue-label{font-size:10px;line-height:1.2}
 .blue-label svg{display:none}
 .blue-label small{font-size:9px}
 .blue-hours>div{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:3px}
 .blue-hours>div>span{display:flex;align-items:baseline;gap:4px;margin-top:0;font-size:10px;line-height:1.3;white-space:nowrap}
 .blue-hours b{font-size:10px}
 .weather-note{margin-top:2px;align-items:center;gap:4px;line-height:1.3}
 #weather-updated{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
 .weather-note #ambience-toggle{flex-shrink:0;min-height:28px;padding:3px 0 3px 5px}
 .search-panel{top:164px}
 .filters{top:222px}
}