/* Three complete palettes, sharing the same forecast and navigation components. */
:root {
  --bg:#f2f5fa;--surface:#fff;--surface-2:#edf2f8;--ink:#172943;--ink-2:#354963;
  --muted:#53657e;--line:#d9e3ee;--line-2:#bdccdf;--brand:#142e52;
  --accent:#175aa8;--accent-2:#104883;--accent-soft:#e5eefb;
  --button-ink:#fff;--selected:#142e52;--selected-ink:#fff;--page-glow:#ddeafb;
  --masthead:#142e52;--masthead-ink:#f4f8ff;--masthead-field:#203d62;
  --masthead-line:#526884;--masthead-muted:#d8e5f6;--footer:#142e52;
  --warm:#ad5717;--rain:#2265a7;--shadow:0 3px 8px #142e5204,0 14px 36px #142e5208;
  --radius:22px;color-scheme:light;
}
html[data-theme="modern"] {
  --bg:#eff6f3;--surface:#fff;--surface-2:#e8f2ed;--ink:#14352f;--ink-2:#35554d;
  --muted:#506e63;--line:#d1e2d9;--line-2:#b0cbbd;--brand:#153f37;
  --accent:#126455;--accent-2:#0a4c40;--accent-soft:#dcf0e7;
  --selected:#153f37;--page-glow:#d9efe3;--masthead:#f7fcfa;--masthead-ink:#153f37;
  --masthead-field:#eaf4ee;--masthead-line:#b8d1c2;--masthead-muted:#456a5b;--footer:#153f37;
  --shadow:0 4px 12px #153f3703,0 18px 42px #153f3709;--radius:28px;
}
html[data-theme="dark"] {
  --bg:#0c1525;--surface:#152238;--surface-2:#1b2b43;--ink:#edf4ff;--ink-2:#ccd9ec;
  --muted:#a4b6cf;--line:#30425d;--line-2:#4a607d;--brand:#e5efff;
  --accent:#91c7ff;--accent-2:#bbdeff;--accent-soft:#253d5c;
  --button-ink:#10233c;--selected:#91c7ff;--selected-ink:#10233c;--page-glow:#172b49;
  --masthead:#0c1525;--masthead-ink:#edf4ff;--masthead-field:#1b2b43;
  --masthead-line:#4a607d;--masthead-muted:#bdcee5;--footer:#09111e;
  --warn-bg:#382d19;--warn-line:#85672f;--warn-ink:#ffe1a0;
  --warm:#ffbd79;--rain:#91c7ff;--shadow:0 8px 30px #0000001f;color-scheme:dark;
}
body{background:radial-gradient(ellipse 1100px 700px at 95% 0,var(--page-glow),transparent 85%),var(--bg)}
main.wrap,.site-footer>.wrap{width:min(1200px,calc(100% - 32px))}
.site-header{background:var(--masthead);border-bottom:1px solid var(--masthead-line)}
.site-header .brand,.site-header .brand:hover{color:var(--masthead-ink)}
.brand img{box-shadow:none}
.appearance-bar{display:none;justify-content:flex-end;align-items:center;gap:14px;padding:18px 0 0}
html[data-theme] .appearance-bar:not([hidden]){display:flex!important}
.appearance-label{font-size:13px;font-weight:600;color:var(--muted)}
.theme-choices{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;box-shadow:0 2px 8px #10233c04}
.theme-choice{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink-2);font-size:14px;font-weight:600;line-height:1.2}
.theme-choice:hover{background:var(--surface-2)}
.theme-choice[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--line-2);color:var(--accent-2)}
.theme-dot{width:13px;height:13px;flex:none;border-radius:50%;border:1px solid #637c9660;background:#4d80c3}
.theme-dot-dark{background:#14233c;border-color:#8ea9ce}
.theme-dot-modern{background:#74bba1;border-color:#3b8068}
.theme-choice[aria-pressed="true"] .theme-dot{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent)}
.hero h1,.page-intro h1{letter-spacing:-.045em}
.forecast-finder{padding-top:20px}
.search-form,.locate-button,.search-results,.save-button,.button.secondary,.skip{background:var(--surface)}
.search-form input::placeholder{color:var(--muted);opacity:1}
.search-form:focus-within{box-shadow:0 0 0 3px var(--accent-soft)}
.search-submit,.button,.nav-count{background:var(--accent);color:var(--button-ink)}
.search-submit:hover,.button:hover{background:var(--accent-2);color:var(--button-ink)}
.button.secondary{color:var(--accent-2)}
.button.secondary:hover{background:var(--accent-soft);color:var(--accent-2)}
.place-name{font-weight:750}
.horizon-tabs{width:fit-content;max-width:100%;padding:5px;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-block:20px}
.horizon-tabs a{flex:1 1 116px;padding-inline:20px;min-height:44px;font-size:15px;white-space:nowrap}
.horizon-tabs a[aria-current]{background:var(--selected);color:var(--selected-ink);box-shadow:0 3px 8px #10233c12}
.panel,.glance-card,.city-card,.guide-card,.hazard-card,.gauge-row,.part-card{border-radius:var(--radius);box-shadow:var(--shadow)}
.now,.tomorrow-card{border-radius:calc(var(--radius) + 4px)}
.now-main{align-items:center}
.now-label{letter-spacing:.015em}
.now-temp{font-weight:500}
.now-metrics div{background:#071a2d25;border-color:#ffffff26}
.now-metrics dt,.now-note{color:#edf4ff}
.glance-card{position:relative;gap:7px}
.glance-card:first-child{border-top:3px solid var(--accent)}
.glance-card .wi{margin-block:8px}
.glance-temps span{color:var(--muted)}
.watch-calm,.link-list a,.callout{background:var(--surface-2)}
.watch-list li{color:var(--warn-ink)}
.watch-note{font-size:13px}
.panel-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-title,.section-title{font-size:22px;letter-spacing:-.035em}
.day summary:hover,.day[open] summary{background:var(--surface-2)}
.hours-table td{border-color:var(--line)}
.hours-table tbody tr:nth-child(even){background:var(--surface-2)}
.hours-scroll{scrollbar-color:var(--line-2) var(--surface)}
.h-rain.wet{fill:var(--rain)}
.day-rain.wet{color:var(--rain)}
.t-line,.t-dot{stroke:var(--warm)}
.t-dot{fill:var(--surface)}
.lg-temp:before{background:var(--warm)}
.r-track,.bar-track{fill:var(--surface-2)}
.now-col{fill:var(--accent-soft)}
.arc-track,.horizon{stroke:var(--line-2)}
.site-footer{background:var(--footer);border-top:1px solid var(--line)}
.footer-about p{max-width:60ch}
body .vmf-consent{background:var(--surface);color:var(--ink);border-color:var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
body .vmf-consent button,body .vmf-consent a,.site-footer .vmf-consent-settings{background:var(--surface-2);color:var(--ink);border-color:var(--line-2);border-radius:10px}
.language-switch a[aria-current]{background:var(--surface);color:var(--ink)}
.site-header .unit-control option{background:var(--surface);color:var(--ink)}
/* Modern uses an open, light masthead and softer cards with a deep green forecast. */
html[data-theme="modern"] .now,html[data-theme="modern"] .tomorrow-card{background:radial-gradient(ellipse at 100% 0,#4e977c60,transparent 65%),linear-gradient(130deg,#173e38,#285c50)}
html[data-theme="modern"] :is(.cond-moon,.cond-partly-night,.cond-showers-night){background:radial-gradient(ellipse at 100% 0,#3b637e70,transparent 65%),linear-gradient(130deg,#142e38,#254c53)}
html[data-theme="modern"] .now:before{display:block;inset:-110px -100px auto auto;width:360px;height:360px;border:1px solid #ffffff15;border-radius:50%;background:transparent;box-shadow:0 0 0 55px #ffffff04,0 0 0 110px #ffffff03}
html[data-theme="modern"] .glance-card{border-top-width:1px}
html[data-theme="modern"] .forecast-finder{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:22px}
html[data-theme="modern"] .city-card{border-radius:18px}
/* Dark covers all informational and hazard components, not just the page canvas. */
html[data-theme="dark"] .now,html[data-theme="dark"] .tomorrow-card{border:1px solid #496386;box-shadow:0 12px 36px #00000020}
html[data-theme="dark"] .save-button[aria-pressed=true]{background:#432838;border-color:#956078;color:#ffc2d0}
html[data-theme="dark"] .remove-saved:hover{color:#ffc2d0}
html[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#20314b,#304766,#20314b);background-size:200% 100%}
html[data-theme="dark"] .map-sea{fill:#102038}
html[data-theme="dark"] .map-border{fill:#223750;stroke:#6d88a9}
html[data-theme="dark"] .map-label{fill:#cfdef1;stroke:#223750}
html[data-theme="dark"] .map-city{fill:#cfdef1}
html[data-theme="dark"] .map-ring{stroke:#8298b5}
html[data-theme="dark"] .map-center{stroke:#d5e7ff}
html[data-theme="dark"] .qd.focus{stroke:#fff}
html[data-theme="dark"] .area-chip.clear{background:#183a31;border-color:#43745f}
html[data-theme="dark"] .area-chip.unknown{background:var(--surface-2)}
html[data-theme="dark"] :is(.area-chip.lvl-2,.hazard-card.lvl-2){background:#382f1e;border-color:#8c7137}
html[data-theme="dark"] :is(.area-chip.lvl-3,.hazard-card.lvl-3,.gauge-row.is-near){background:#3b2b20;border-color:#99623c}
html[data-theme="dark"] :is(.area-chip.lvl-4,.hazard-card.lvl-4,.gauge-row.is-over){background:#3c2430;border-color:#9a5465}
html[data-theme="dark"] .notice.alarm{background:#3c2430;color:#ffd2db;border-color:#9a5465}
html[data-theme="dark"] .gauge-flag,html[data-theme="dark"] .hg-alarm-label{color:#ffc1cc;fill:#ffc1cc}
html[data-theme="dark"] .trend-r{color:#ffc183}
html[data-theme="dark"] .trend-o{color:#92dbb6}
html[data-theme="dark"] .gauge-hero .trend{color:#fff}
html[data-theme="dark"] .gauge-bar{background:var(--line)}
html[data-theme="dark"] .hg-area{fill:#91c7ff24}
html[data-theme="dark"] .hg-dot{fill:var(--surface)}
@media(min-width:1360px){
  .weather-drop>summary,.weather-drop>summary.is-current,.weather-drop[open]>summary{color:var(--masthead-ink)}
  .weather-drop[open]>summary{background:var(--masthead-field)}
  .site-header .header-saved{color:var(--masthead-ink)}
  .site-header .header-place-search,.site-header .language-switch,.site-header .unit-control select{background:var(--masthead-field);border-color:var(--masthead-line);color:var(--masthead-ink)}
  .site-header .header-place-search input::placeholder{color:var(--masthead-muted)}
  .site-header .header-place-search button,.site-header .language-switch a{color:var(--masthead-ink)}
  .site-header .language-switch a[aria-current]{background:var(--surface);color:var(--ink)}
  html[data-theme="modern"] .site-header :focus-visible{outline-color:var(--accent)}
}
@media(max-width:1359px){.weather-menu-button{color:var(--masthead-ink);border-color:var(--masthead-line);background:var(--masthead-field)}}
@media(min-width:900px){
  .forecast-top{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start}
  .now{min-height:450px;padding:30px}
  .now-main{min-height:210px}
  .forecast-finder .hero h1{font-size:36px;max-width:24ch}
  .forecast-finder{gap:48px;padding-top:12px;padding-bottom:8px}
  .top-side .watch{margin-top:18px}
}
@media(max-width:559px){
  .appearance-bar{padding-top:12px;gap:8px;justify-content:center}
  .appearance-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .theme-choices{width:100%;justify-content:space-between}
  .theme-choice{flex:1;padding:7px 8px;min-height:44px;font-size:13px;gap:7px}
  .theme-dot{width:11px;height:11px}
  .forecast-finder{padding-top:0}
  .hero h1{font-size:30px;line-height:1.14;text-wrap:balance}
  .hero{padding-top:22px}
  .hero p{line-height:1.55;font-size:15px}
  .horizon-tabs{width:100%;gap:2px;padding:4px;border-radius:13px}
  .horizon-tabs a{min-height:44px;padding-inline:2px;font-size:14px;flex:1 1 0}
  .horizon-tabs a[aria-current]{border-radius:9px}
  .now,.tomorrow-card{padding:22px 18px}
  .panel-title,.section-title{font-size:20px}
  .panel-head{padding-bottom:12px;margin-bottom:14px}
  html[data-theme="modern"] .forecast-finder{padding-bottom:18px;margin-bottom:18px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .city-card,.guide-card,.glance-card,.hazard-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .city-card:hover,.guide-card:hover,.glance-card:hover,.hazard-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
}
@media print{.appearance-bar{display:none}}
/* Phone controls keep room for place names and the forecast itself. */
@media(max-width:559px){
  html[data-theme="modern"]{--radius:20px}
  html[data-theme] .search-row{gap:8px;margin-block:18px 14px}
  html[data-theme] .search-form{padding:5px 5px 5px 12px;gap:6px}
  html[data-theme] .search-form>.search-icon{display:none}
  html[data-theme] .search-submit{width:44px;flex:0 0 44px;padding:0;font-size:0;display:grid;place-items:center}
  html[data-theme] .search-submit:before{content:"";width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
  html[data-theme] .locate-button{min-width:48px;min-height:54px;padding-inline:12px}
  html[data-theme] .hero{padding-top:18px;padding-bottom:0}
  html[data-theme] .forecast-finder{padding-bottom:10px;margin-bottom:12px}
  html[data-theme] .place-head{margin-top:14px}
  html[data-theme] .horizon-tabs{margin-block:16px}
  html[data-theme] .glance-card{padding:14px;gap:6px}
  html[data-theme] .glance-card:hover{border-color:var(--line-2)}
}
@media(max-width:359px){
  html[data-theme] .hero h1{font-size:28px}
  html[data-theme] .place-title{gap:8px}
  html[data-theme] .save-button{min-width:44px;width:44px;padding-inline:10px;flex-shrink:0}
  html[data-theme] .save-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-theme] .horizon-tabs{flex-wrap:wrap;gap:4px}
  html[data-theme] .horizon-tabs a{flex:1 1 calc(33.333% - 4px);font-size:13px}
}
/* Keep white forecast text readable even at the brightest gradient stop. */
html:not([data-theme="modern"]) .cond-sun{background:radial-gradient(ellipse at 100% 0,#7dd3ed20,transparent 60%),linear-gradient(125deg,#144d93,#155b8a)}
html:not([data-theme="modern"]) .cond-partly{background:radial-gradient(ellipse at 100% 0,#d1e9ff18,transparent 60%),linear-gradient(125deg,#214e81,#325e80)}
html:not([data-theme="modern"]) .cond-fog{background:linear-gradient(125deg,#43596d,#4d6272)}
.gauge-hero.is-near{background:linear-gradient(125deg,#744300,#8b5808)}
:root{--control-line:#71849c}
html[data-theme="modern"]{--control-line:#789189}
html[data-theme="dark"]{--control-line:#7187a5}
.search-form,.locate-button,.save-button{border-color:var(--control-line)}
@media(max-width:1359px){
  .header-place-search,.unit-control select,.language-switch{border-color:var(--control-line)}
  .header-place-search input::placeholder{color:var(--muted);opacity:1}
}