/* Weather, actually. – Atmosphere dashboard. Cosmetic layers only; data comes from the existing app. */
:root{--mood-1:#ff9b46;--mood-2:#ef572d;--mood-3:#ae3b47;--accent:#ffaa66;--accent-soft:rgba(255,162,96,.14)}
body{background:#121723;transition:background .3s ease;}
body.dark{--bg:#131823;--surface:#1d2432;--text:#f5f5fa;--muted:#abb2c5;--muted-dark:#bbc0cf;--line:#323b4c;--soft:#272b3d;--soft-ink:#fae4d8;background:radial-gradient(ellipse 70% 45% at 8% 10%,rgba(185,89,62,.18),transparent 70%),radial-gradient(ellipse 58% 35% at 90% 32%,rgba(46,71,133,.20),transparent 68%),#111620}
body:not(.dark){--text:#17243b;--muted:#6c778d;--muted-dark:#57647c;--line:#e2e8f1;--surface:#fff;--bg:#f3f5fb;background:radial-gradient(ellipse 70% 35% at 6% 3%,#ffeddc,transparent 70%),#f5f7fc}
body[data-mood="aurora"]{--mood-1:#547bcc;--mood-2:#6557af;--mood-3:#233d66;--accent:#87e8c4;--accent-soft:rgba(107,210,196,.14)}
body[data-mood="electric"]{--mood-1:#23b9cf;--mood-2:#3480d6;--mood-3:#3b3d92;--accent:#71dbfa;--accent-soft:rgba(64,167,230,.14)}
.app-shell{max-width:1576px;padding:0 48px}
.topbar{min-height:84px;border-bottom:1px solid rgba(158,174,204,.16)}
.brand-name{letter-spacing:-.65px}
.main-nav{padding-left:0}
.main-nav a{font-size:12px}
.main-nav a:hover,.main-nav a.active{color:var(--accent)}
.header-tools{gap:12px}
.location-button,.icon-button,.save-location,.refresh-button{background:rgba(143,155,186,.09);border:1px solid var(--line);color:var(--text);border-radius:13px}
.icon-button{min-width:42px}
.announcement{background:rgba(141,151,182,.07)!important;color:var(--muted-dark)!important;border:1px solid var(--line)!important;border-radius:13px;margin-top:17px;padding:12px 17px}
.announcement a{color:var(--text)!important}
.announcement-left strong{color:var(--text)!important}
.intro-section{padding:38px 0 24px}
.intro-row h1{font-size:clamp(34px,4.3vw,60px);line-height:1.025;letter-spacing:-2.6px;margin:5px 0 10px}
.intro-row h1 span,.dark .intro-row h1 span,body.dark .intro-row h1 span{background:linear-gradient(90deg,var(--accent),#ffebc9);background-clip:text;-webkit-background-clip:text;color:transparent}
body[data-mood="aurora"] .intro-row h1 span,body[data-mood="electric"] .intro-row h1 span{background:linear-gradient(90deg,var(--accent),#a4bbff);background-clip:text;-webkit-background-clip:text;color:transparent}
.intro-row p{font-size:13px;color:var(--muted-dark)}
.eyebrow{color:var(--accent)}
.places-panel{margin:23px 0 0;background:rgba(145,159,191,.05);border-color:var(--line);padding:17px 20px}
.places-heading h2{font-size:14px}
.place-chip{background:rgba(255,255,255,.04)}
.place-chip-current{border-color:var(--accent)!important;background:var(--accent-soft)!important}
.places-overline{color:var(--accent)}
.experience-section{--dash-glass:rgba(30,37,54,.92);border:1px solid rgba(236,242,255,.16);border-radius:29px;padding:22px;background:radial-gradient(circle at 5% 0%,rgba(255,144,88,.08),transparent 52%),linear-gradient(145deg,#1e222d,#10151f 80%);box-shadow:0 24px 65px rgba(0,0,0,.22);color:#f6f7fc;position:relative;isolation:isolate;overflow:hidden}
.experience-section:before{content:"";position:absolute;inset:-150px -200px auto 20%;height:320px;background:radial-gradient(ellipse,rgba(255,188,119,.065),transparent 70%);pointer-events:none;z-index:-1}
.experience-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 5px 20px}
.experience-kicker,.eyebrow-light{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:1.8px;margin:0 0 6px}
.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:var(--accent);box-shadow:0 0 13px var(--accent);margin-right:7px;vertical-align:1px}
.experience-head h2{font-size:clamp(21px,2.1vw,32px);letter-spacing:-1.1px;line-height:1.13;margin:0;font-weight:900}
.experience-dot{color:var(--accent)}
.experience-head p:not(.experience-kicker){font-size:11px;color:#aeb9cc;margin:7px 0 0}
.mood-picker{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:40px;background:rgba(255,255,255,.035);padding:7px 10px}
.mood-picker-label{color:#9fa9c0;font-size:9px;font-weight:900;letter-spacing:1px;margin-right:5px}
.mood-swatch{width:34px;height:34px;border:2px solid rgba(255,255,255,.14);border-radius:50%;background:linear-gradient(135deg,#ffae63,#e34a36);color:#fff;display:grid;place-items:center;box-shadow:0 3px 10px #0003;transition:transform .22s,border .22s;cursor:pointer}
.mood-swatch span{font-size:15px}
.mood-swatch[data-mood="aurora"]{background:linear-gradient(130deg,#67c8ad,#6159b8)}
.mood-swatch[data-mood="electric"]{background:linear-gradient(130deg,#5cd6df,#4564d4)}
.mood-swatch:hover{transform:translateY(-2px)}
.mood-swatch.is-selected{border-color:white;box-shadow:0 0 0 3px var(--accent-soft)}
.experience-top{display:grid;grid-template-columns:minmax(300px,.80fr) minmax(0,1.25fr);gap:16px;align-items:stretch}
.experience-hero-slot{min-width:0;min-height:500px;display:flex}
.experience-top .hero-card{width:100%;min-height:500px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(145deg,var(--mood-1) 0%,var(--mood-2) 59%,var(--mood-3) 100%)!important;color:white;border-radius:24px;box-shadow:0 18px 35px rgba(0,0,0,.23);overflow:hidden}
.experience-top .hero-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 73% 33%,rgba(255,248,189,.25),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.20),transparent 45%);pointer-events:none;z-index:1}
.experience-top .hero-inner{min-height:500px;position:relative;z-index:3;justify-content:space-between;padding:25px 25px 21px}
.experience-top .hero-middle h2{font-size:clamp(24px,2.25vw,34px);line-height:1.08;max-width:360px;letter-spacing:-1px;text-shadow:0 2px 12px #50221f22}
.experience-top .hero-main-temp{margin-top:12px}
.experience-top .hero-main-temp #mainTemp{font-size:clamp(72px,7vw,106px);line-height:.95;letter-spacing:-5px;font-weight:850}
.experience-top .hero-main-temp .degree{font-size:58px;align-self:start;line-height:1.2}
.experience-top .hero-condition{font-size:12px;background:#fff3;border:1px solid #fff4;padding:6px 10px;border-radius:20px;letter-spacing:0}
.experience-top .hero-salutation{font-size:12px}
.experience-top .hero-topline .glass-pill{background:#fff3;border:1px solid #fff5;font-size:12px;padding:9px 11px}
.experience-top .hero-updated{font-size:10px;color:#fff}
.experience-top .hero-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.experience-top .hero-metric{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:12px;backdrop-filter:blur(9px);min-height:60px;padding:10px 7px}
.experience-top .metric-caption{font-size:9px;color:#fff9}
.experience-top .metric-copy strong{font-size:13px;color:white}
.experience-top .sun-disc{width:150px;height:150px;left:auto;right:12%;top:22%;background:radial-gradient(circle at 45% 42%,#fffbd9,#ffdc93 68%,#ffd176);box-shadow:0 0 85px rgba(255,225,152,.58),0 0 220px rgba(255,232,190,.30);animation:sky-breathe 12s ease-in-out infinite alternate}
.experience-top .sun-glow{width:440px;height:440px;left:auto;right:-80px;top:-110px;background:radial-gradient(circle,#fff4c944,transparent 65%)}
.experience-top .hill,.experience-top .cloud{opacity:.25}
.experience-forecast{display:flex;flex-direction:column;min-width:0;min-height:500px;gap:12px}
.week-bar-head{display:flex;align-items:end;justify-content:space-between;gap:8px;padding:2px 2px 0}
.week-bar-head h3{margin:0;color:#f3f5ff;font-size:16px;letter-spacing:-.5px}
.week-all-link{color:#f5bc9e!important;border:1px solid #ffffff26;background:#ffffff08;border-radius:999px;padding:8px 12px;text-decoration:none;font-weight:850;font-size:10px;white-space:nowrap}
.week-ribbon{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;min-width:0;min-height:120px}
.week-day{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:13px 3px 11px;min-width:0;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:linear-gradient(155deg,#ffffff13,#ffffff04);color:#f3f5ff;text-align:center;cursor:pointer;transition:transform .16s,border .16s,background .16s}
.week-day:hover{transform:translateY(-4px);border-color:var(--accent)}
.week-day.is-active{border-color:var(--accent);background:linear-gradient(155deg,var(--accent-soft),#ffffff04);box-shadow:inset 0 0 0 1px var(--accent-soft)}
.week-day .day-name{font-size:10px;font-weight:800;color:#d3d5e4}
.week-day .day-symbol{font-size:26px;line-height:1;filter:drop-shadow(0 4px 7px #0002)}
.week-day .day-temp{font-size:12px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}
.week-day .day-temp small{font-size:9px;font-weight:600;color:#acb6cc}
.week-loading{font-size:12px;color:#9ba6bb;align-self:center;grid-column:1/-1}
.experience-forecast #hourly{margin:0;padding:0;min-width:0;display:flex;flex-direction:column;flex:1}
.experience-forecast #hourly .section-heading{margin:0;padding:6px 3px 6px;gap:12px}
.experience-forecast #hourly .section-kicker{display:none}
.experience-forecast #hourly .section-heading h2{font-size:17px!important;line-height:1.2;color:#faf6f3;letter-spacing:-.5px}
.experience-forecast #hourly .section-heading p{font-size:10px;color:#a7b3c9}
.experience-forecast #hourly .forecast-for{font-size:9px;margin-top:5px;color:#c3c8d9}
.experience-forecast #hourly .forecast-chart-card{background:linear-gradient(125deg,#ffffff0c,#ffffff02);border:1px solid rgba(255,255,255,.13);border-radius:18px;box-shadow:none;padding:18px 14px 9px;min-height:0;flex:1}
.experience-forecast #hourly .chart-top{color:#f5f6fb}
.experience-forecast #hourly .chart-top strong{color:#fff;font-size:28px}
.experience-forecast #hourly .chart-top>span,.experience-forecast #hourly .chart-note{color:#aeb7c9;font-size:10px}
.experience-forecast #hourly .hour-point{color:#e6e9f4}
.experience-forecast #hourly .hour-point strong{color:#f5f5fa}
.experience-forecast #hourly .hour-point .pop{color:#a4b2ca}
.experience-forecast #hourly .segmented{background:#ffffff11;border:1px solid #ffffff20}
.experience-forecast #hourly .segment{color:#c4cade}
.experience-forecast #hourly .segment.active{background:var(--accent);color:#1c2633!important}
.experience-bottom{display:grid;grid-template-columns:1.3fr .8fr;gap:16px;margin-top:16px}
.experience-bottom .today-aside{display:grid;grid-template-columns:1fr 1fr;gap:15px;min-width:0}
.experience-bottom .summary-card,.experience-bottom .detail-card,.weather-questions{border:1px solid rgba(255,255,255,.13);background:linear-gradient(142deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border-radius:20px;padding:20px;box-shadow:none;min-height:195px;color:#f8f9fd}
.experience-bottom .summary-card:after{display:none}
.experience-bottom .summary-card h2{color:#fff;font-size:22px;line-height:1.18}
.experience-bottom .summary-card p{color:#c8d0de;font-size:11px}
.experience-bottom .detail-card .card-heading h3,.experience-bottom .detail-item strong{color:white}
.experience-bottom .detail-item{color:#c7cedc}
.experience-bottom .detail-item .i{color:var(--accent)}
.experience-bottom .detail-tag{color:#93a3bc;font-size:8px}
.experience-bottom .detail-grid{gap:13px}
.experience-bottom .card-kicker{color:var(--accent)}
.weather-questions{min-width:0;min-height:195px;background:radial-gradient(circle at 100% 0%,var(--accent-soft),transparent 55%),linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.015))}
.questions-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.questions-head h3{font-size:18px;margin:0;letter-spacing:-.4px}
.question-glint{font-size:35px;color:var(--accent);opacity:.8}
.weather-questions>p{font-size:11px;color:#acb8cf;line-height:1.5;margin:8px 0 14px}
.question-buttons{display:flex;flex-wrap:wrap;gap:7px}
.question-buttons button{border:1px solid #ffffff24;background:#ffffff09;color:#dbe2ee;padding:9px 11px;border-radius:10px;font-size:10px;font-weight:750;white-space:nowrap}
.question-buttons button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#1c2633}
.weather-answer{margin-top:12px;border-top:1px solid #ffffff22;padding-top:12px}
.weather-answer #questionFlag{display:block;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:1.2px}
.weather-answer strong{display:block;color:#fff;font-size:14px;line-height:1.3;margin:5px 0}
.weather-answer p{color:#c4cbda;font-size:11px;line-height:1.5;margin:0}
/* The remaining weather tools stay familiar, but adopt the dashboard's visual language. */
.daylight-card,.quick-insight,.forecast-chart-card,.info-panel,.map-panel,.warning-section{border-radius:21px}
body.dark .daylight-card,body.dark .quick-insight,body.dark .info-panel,body.dark .warning-section{background:#1c2432;border-color:#303a4b}
body.dark .planner-card{background:linear-gradient(155deg,#242842,#1c2637);border-color:#323a51}
.section-heading h2,.panel-heading h2{letter-spacing:-.6px}
.section-gap{margin-top:40px}
body.dark .daylight-card{color:#e5ebf6}
.experience-section ~ #hourly{display:none}
@keyframes sky-breathe{0%{transform:scale(.97);filter:brightness(.97)}100%{transform:scale(1.07);filter:brightness(1.07)}}
@media(max-width:1250px){.experience-top{grid-template-columns:minmax(285px,.75fr) minmax(0,1.2fr)}.app-shell{padding:0 30px}.experience-bottom{grid-template-columns:1fr}.experience-bottom .today-aside{grid-template-columns:1fr 1fr}.week-day{padding-inline:1px}.week-ribbon{gap:5px}.experience-top .hero-main-temp #mainTemp{font-size:78px}}
@media(max-width:980px){.experience-top{grid-template-columns:1fr}.experience-hero-slot,.experience-top .hero-card,.experience-top .hero-inner{min-height:385px}.experience-top .hero-card{max-height:none}.experience-bottom{grid-template-columns:1fr}.experience-forecast{min-height:0}.week-ribbon{min-height:110px}.experience-forecast #hourly .forecast-chart-card{min-height:315px}.experience-forecast #hourly .section-heading{padding:12px 3px}.experience-top .sun-disc{top:14%;right:14%}}
@media(max-width:760px){.app-shell{padding:0 14px}.experience-section{padding:13px;border-radius:22px}.experience-head{align-items:flex-start;flex-direction:column;gap:12px;padding:5px 5px 17px}.experience-head h2{font-size:23px}.mood-picker{align-self:flex-start}.experience-top{gap:16px}.experience-hero-slot,.experience-top .hero-card,.experience-top .hero-inner{min-height:430px}.experience-top .hero-inner{padding:18px 15px}.experience-top .hero-main-temp #mainTemp{font-size:75px}.experience-top .hero-main-temp .degree{font-size:45px}.experience-top .sun-disc{width:116px;height:116px;right:7%;top:23%}.experience-top .hero-middle h2{font-size:25px;max-width:270px}.experience-top .hero-bottom{gap:5px}.experience-top .hero-metric{padding:7px 3px;min-height:57px}.experience-top .metric-copy strong{font-size:10px}.experience-top .metric-caption{font-size:8px}.experience-top .metric-icon{display:none}.week-ribbon{display:flex;overflow-x:auto;scrollbar-width:thin;padding:1px 1px 8px;scroll-snap-type:x proximity;gap:8px}.week-day{min-width:86px;min-height:117px;scroll-snap-align:start}.experience-bottom .today-aside{grid-template-columns:1fr;gap:12px}.experience-bottom .summary-card,.experience-bottom .detail-card,.weather-questions{min-height:unset;padding:17px}.experience-forecast #hourly .section-heading{align-items:flex-start;flex-direction:column;gap:12px}.experience-forecast #hourly .forecast-chart-card{padding:14px 8px 9px;min-height:310px}.experience-forecast #hourly .chart-top strong{font-size:22px}.intro-section{padding:28px 0 16px}.intro-row h1{font-size:clamp(29px,7vw,40px);letter-spacing:-1.5px}.intro-row p{font-size:11px}.week-bar-head h3{font-size:14px}.places-panel{margin-top:14px}.map-section{margin-top:36px}}
@media(max-width:390px){.experience-top .hero-topline{gap:5px}.experience-top .hero-updated{font-size:8px}.experience-top .hero-middle h2{max-width:240px}.mood-picker-label{font-size:8px}.experience-section{padding:10px}.experience-bottom .detail-grid{grid-template-columns:1fr 1fr}.experience-top .hero-card{border-radius:17px}}
@media(prefers-reduced-motion:reduce){.experience-top .sun-disc{animation:none}.week-day,.mood-swatch{transition:none}}
.week-peek{border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);color:#cdd2e0;min-height:32px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:650}
.week-peek strong{color:var(--accent)}
.week-peek a{font-size:10px;font-weight:850;color:#ffbf9a;text-decoration:none;white-space:nowrap}
body[data-mood="aurora"] .week-peek a,body[data-mood="electric"] .week-peek a{color:var(--accent)}