:root {
  --bg: #f3f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --border: #e6edf5;
  --text: #14213d;
  --muted: #6f7e96;
  --primary: #1877f2;
  --primary-dark: #0c5dc4;
  --primary-soft: #eaf3ff;
  --cyan: #0ea5e9;
  --green: #2eae63;
  --amber: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 12px 34px rgba(34, 68, 112, .09);
  --shadow-soft: 0 6px 18px rgba(34, 68, 112, .065);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --text-scale: 1;
}
html[data-text-size="large"] { --text-scale: 1.18; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; width:100%; max-width:100%; overflow-x:hidden; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 5% 0%, rgba(24,119,242,.08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  width:100%; max-width:100%; overflow-x:hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

main, .page-section, .graph-grid, .rain-graph-grid, .overview-lower-grid,
.metric-grid, .forecast-summary-grid, .rain-summary-grid, .panel, .chart-panel,
.forecast-panel, .forecast-detail-panel { min-width:0; max-width:100%; }
canvas { max-width:100% !important; }
img, svg { max-width:100%; }


.app-shell { width: min(1500px, 100%); margin: 0 auto; padding: 18px 22px 28px; }
.topbar {
  position: sticky; top: 12px; z-index: 50;
  min-height: 74px; display: flex; align-items: center; gap: 28px;
  padding: 10px 14px 10px 20px; margin-bottom: 18px;
  border: 1px solid rgba(230,237,245,.9); border-radius: 22px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(31, 65, 109, .08);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-weight: 800; font-size:calc(26px * var(--text-scale)); letter-spacing: -.8px; white-space: nowrap; }
.brand-accent { color: var(--primary); }
.brand-mark { position: relative; display: inline-block; width: 44px; height: 35px; }
.brand-cloud { position: absolute; left: 3px; bottom: 2px; width: 35px; height: 20px; border-radius: 20px; background: linear-gradient(135deg, #2d8bff, #1669de); box-shadow: inset 0 -3px 5px rgba(0,0,0,.08); }
.brand-cloud:before, .brand-cloud:after { content:""; position:absolute; background:inherit; border-radius:50%; }
.brand-cloud:before { width:19px;height:19px;left:5px;top:-9px; }
.brand-cloud:after { width:15px;height:15px;left:18px;top:-5px; }
.brand-sun { position:absolute; right:1px; top:0; width:17px; height:17px; border-radius:50%; background:#ffb000; }

.main-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; margin-left: 18px; }
.nav-link { position: relative; border:0; background:transparent; color:#43526a; font-weight:650; padding:0 14px; }
.nav-link:after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:3px; border-radius:3px; background:transparent; transform:scaleX(.4); transition:.2s ease; }
.nav-link:hover { color:var(--primary); }
.nav-link.active { color:var(--primary); }
.nav-link.active:after { background:var(--primary); transform:scaleX(1); }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.live-pill { height:38px; display:flex; align-items:center; gap:8px; padding:0 13px; border-radius:14px; background:#f6f9fc; border:1px solid var(--border); color:var(--muted); font-size:calc(13px * var(--text-scale)); font-weight:650; white-space:nowrap; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#9aa8ba; box-shadow:0 0 0 4px rgba(154,168,186,.12); }
.live-pill.fresh .live-dot { background:var(--green); box-shadow:0 0 0 4px rgba(46,174,99,.12); }
.live-pill.stale .live-dot { background:var(--danger); box-shadow:0 0 0 4px rgba(239,68,68,.12); }
.icon-button, .mobile-menu-button { width:40px; height:40px; border:0; border-radius:13px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; }
.icon-button svg, .mobile-menu-button svg { width:19px; height:19px; }
.mobile-menu-button { display:none; margin-left:auto; }

.page-section { display:none; animation: pageIn .28s ease both; }
.page-section.active { display:block; }
@keyframes pageIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.weather-hero {
  min-height: 334px; position:relative; overflow:hidden; display:flex; justify-content:space-between; gap:30px;
  border-radius: var(--radius-xl); padding: 36px 38px;
  color:white;
  background:
    linear-gradient(105deg, rgba(11,83,166,.96) 0%, rgba(22,116,218,.92) 47%, rgba(48,153,235,.75) 100%),
    radial-gradient(circle at 82% 25%, rgba(255,255,255,.3), transparent 20rem),
    #1673cf;
  box-shadow: 0 18px 44px rgba(21, 101, 190, .22);
}
.weather-hero:after {
  content:""; position:absolute; inset:auto -8% -35% 42%; height:95%; opacity:.22;
  background: linear-gradient(165deg, transparent 0 52%, rgba(255,255,255,.8) 52% 55%, transparent 55% 100%);
  transform: rotate(-3deg);
}
.hero-decoration { position:absolute; border-radius:50%; background:rgba(255,255,255,.09); filter:blur(2px); }
.hero-decoration-a { width:360px;height:360px;right:6%;top:-220px; }
.hero-decoration-b { width:220px;height:220px;right:24%;bottom:-150px; }
.hero-copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; }
.location-row { display:flex; align-items:center; gap:10px; font-size:calc(24px * var(--text-scale)); font-weight:760; letter-spacing:-.4px; }
.location-row svg { width:24px;height:24px; }
.eyebrow { margin:7px 0 14px 34px; opacity:.78; font-weight:550; }
.temperature-line { display:flex; align-items:flex-start; line-height:.9; margin-top:2px; }
.hero-temperature { font-size: clamp(76px, 8vw, 124px); font-weight:750; letter-spacing:-6px; }
.hero-unit { font-size:calc(48px * var(--text-scale)); font-weight:650; margin:8px 0 0 10px; }
.hero-condition-row { margin-top:20px; display:flex; align-items:center; gap:14px; }
.hero-condition-row img { width:72px;height:72px; object-fit:contain; filter:drop-shadow(0 6px 7px rgba(0,0,0,.12)); }
.hero-condition-row div { display:flex; flex-direction:column; gap:5px; }
.hero-condition-row strong { font-size:calc(18px * var(--text-scale)); }
.hero-condition-row span { opacity:.78; font-size:calc(14px * var(--text-scale)); }
.hero-side { position:relative; z-index:2; min-width:290px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.updated-chip { display:flex; align-items:center; gap:9px; padding:11px 14px; border:1px solid rgba(255,255,255,.17); border-radius:14px; background:rgba(11,74,143,.28); backdrop-filter:blur(8px); font-size:calc(13px * var(--text-scale)); }
.updated-chip svg { width:17px;height:17px; }
.hero-minmax { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:330px; }
.hero-minmax div { padding:15px; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.1); backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:5px; }
.hero-minmax > div > span { font-size:calc(12px * var(--text-scale)); opacity:.72; }
.hero-minmax strong { font-size:calc(24px * var(--text-scale)); line-height:1.1; letter-spacing:-.4px; }
.hero-minmax strong span { font-size:inherit; line-height:inherit; opacity:1; }

.metric-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin:14px 0; }
.metric-card { min-height:112px; padding:17px 16px; position:relative; display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.metric-icon { flex:0 0 41px; width:41px; height:41px; border-radius:13px; display:grid; place-items:center; }
.metric-icon svg { width:22px;height:22px; }
.metric-icon.blue { background:#edf5ff; color:var(--primary); }
.metric-icon.cyan { background:#ecfbff; color:#0891b2; }
.metric-icon.green { background:#eefbf2; color:var(--green); }
.metric-icon.amber { background:#fff8e8; color:var(--amber); }
.metric-card > div:not(.rain-navigation) { min-width:0; display:flex; flex-direction:column; gap:4px; }
.metric-card div > span { color:var(--muted); font-size:calc(12.5px * var(--text-scale)); font-weight:600; }
.metric-card strong { white-space:nowrap; font-size:calc(22px * var(--text-scale)); letter-spacing:-.5px; }
.metric-card strong small { font-size:calc(12px * var(--text-scale)); font-weight:650; color:var(--muted); letter-spacing:0; }
.metric-card em { font-style:normal; color:var(--muted); font-size:calc(11px * var(--text-scale)); font-weight:600; }
.rain-card { padding-right:45px; }
.rain-navigation { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; }
.rain-navigation button { width:27px;height:27px;border:0;border-radius:9px;background:#f4f7fb;color:#718097;display:grid;place-items:center; }
.rain-navigation button:hover:not(:disabled){background:var(--primary-soft);color:var(--primary);}
.rain-navigation button:disabled { opacity:.3; cursor:not-allowed; }
.rain-navigation svg { width:15px;height:15px; }

.overview-lower-grid { display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:14px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-soft); padding:20px; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:12px; }
.panel-kicker { display:block; margin-bottom:3px; color:var(--primary); text-transform:uppercase; letter-spacing:.09em; font-size:calc(10px * var(--text-scale)); font-weight:800; }
.panel h2 { font-size:calc(16px * var(--text-scale)); margin:0; letter-spacing:-.2px; }
.text-button { border:0; background:transparent; color:var(--primary); display:flex; align-items:center; gap:4px; font-size:calc(12px * var(--text-scale)); font-weight:700; padding:3px 0; white-space:nowrap; }
.text-button svg { width:15px;height:15px; }
.hourly-strip { min-height:210px; display:grid; grid-template-columns:repeat(8,minmax(64px,1fr)); overflow-x:auto; padding-bottom:4px; }
.hour-card { min-width:64px; padding:10px 7px; text-align:center; display:flex; align-items:center; flex-direction:column; gap:6px; border-right:1px solid #eef2f7; }
.hour-card:last-child { border-right:0; }
.hour-time { color:var(--muted); font-size:calc(11px * var(--text-scale)); font-weight:650; }
.hour-card img { width:42px;height:42px; object-fit:contain; }
.hour-card strong { font-size:calc(18px * var(--text-scale)); }
.hour-rain { display:flex;align-items:center;gap:2px;color:#7290b6;font-size:calc(10px * var(--text-scale));font-weight:650; }
.hour-rain svg{width:10px;height:10px;}
.chart-wrap { position:relative; width:100%; height:320px; }
.chart-wrap.compact { height:210px; }
.skeleton-line { width:100%; height:180px; border-radius:14px; background:linear-gradient(90deg,#f1f4f8,#f8fafc,#f1f4f8); background-size:200% 100%; animation: shimmer 1.3s infinite linear; }
@keyframes shimmer{to{background-position:-200% 0}}

.section-title-row { min-height:112px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:14px 5px 24px; }
.section-title-row h1 { margin:3px 0 5px; font-size:calc(30px * var(--text-scale)); letter-spacing:-1px; }
.section-title-row p { margin:0; color:var(--muted); font-size:calc(14px * var(--text-scale)); }
.source-badge { display:flex; align-items:center; gap:8px; padding:10px 13px; background:#fff8e8; color:#a16300; border:1px solid #fee6ae; border-radius:14px; font-size:calc(12px * var(--text-scale)); font-weight:700; }
.source-badge svg { width:17px;height:17px; }
.forecast-summary-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:14px; }
.day-card { padding:18px 14px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-soft); }
.day-card .day-name { font-size:calc(13px * var(--text-scale));font-weight:750; }
.day-card .day-date { color:var(--muted);font-size:calc(11px * var(--text-scale));margin-top:2px; }
.day-card img { width:62px;height:62px;margin:8px 0; }
.day-temps { display:flex;justify-content:center;gap:8px;align-items:baseline; }
.day-temps strong{font-size:calc(20px * var(--text-scale))}.day-temps span{color:var(--muted);font-size:calc(14px * var(--text-scale))}
.day-rain { margin-top:8px;color:#4e78a8;font-size:calc(11px * var(--text-scale));font-weight:650; }
.forecast-detail-panel { padding-bottom:10px; }
.forecast-table-wrap { overflow:auto; max-height:640px; }
.forecast-table { width:100%; border-collapse:separate; border-spacing:0; font-size:calc(13px * var(--text-scale)); }
.forecast-table th { position:sticky;top:0;background:var(--surface);z-index:2;text-align:left;color:var(--muted);font-size:calc(11px * var(--text-scale));text-transform:uppercase;letter-spacing:.04em;padding:11px 12px;border-bottom:1px solid var(--border); }
.forecast-table td { padding:10px 12px;border-bottom:1px solid #eff3f7;white-space:nowrap; }
.forecast-state { display:flex;align-items:center;gap:9px; }
.forecast-state img{width:34px;height:34px;}

.range-switcher { display:flex; padding:4px; border-radius:13px; background:#eaf0f7; }
.range-switcher button { min-width:60px; border:0; padding:8px 11px; border-radius:10px; background:transparent; color:#67778e; font-size:calc(12px * var(--text-scale));font-weight:750; }
.range-switcher button.active { background:white;color:var(--primary);box-shadow:0 3px 9px rgba(38,64,94,.1); }
.graph-grid, .rain-graph-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.chart-panel.large { min-width:0; }
.rain-summary-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px; }
.rain-summary-card { min-height:126px;padding:22px;background:linear-gradient(145deg,#fff,#f7fbff);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;justify-content:center;gap:8px; }
.rain-summary-card span { color:var(--muted);font-size:calc(13px * var(--text-scale));font-weight:650; }
.rain-summary-card strong { font-size:calc(30px * var(--text-scale));color:var(--primary);letter-spacing:-1px; }
.rain-summary-card strong span { color:inherit;font-size:inherit; }
.footer { margin-top:20px; min-height:78px; display:flex;align-items:center;justify-content:space-between;gap:30px;padding:17px 20px;color:var(--muted);font-size:calc(12px * var(--text-scale)); }
.footer > div { display:flex;flex-direction:column;gap:3px; }
.footer strong { color:var(--text);font-size:calc(13px * var(--text-scale)); }

@media (max-width:1280px){
  .metric-grid{grid-template-columns:repeat(4,1fr)}
  .overview-lower-grid{grid-template-columns:1fr 1fr}.forecast-panel{grid-column:1/-1}
  .forecast-summary-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .app-shell{padding:10px}.topbar{top:6px;min-height:64px;margin-bottom:10px;padding:8px 10px 8px 14px}.brand{font-size:calc(23px * var(--text-scale))}.brand-mark{transform:scale(.88);transform-origin:left center;width:39px}
  .main-nav{position:absolute;left:0;right:0;top:72px;display:none;flex-direction:column;align-self:auto;margin:0;background:white;border:1px solid var(--border);border-radius:16px;padding:7px;box-shadow:var(--shadow)}
  .topbar.menu-open .main-nav{display:flex}.nav-link{height:44px;text-align:left;border-radius:10px;padding:0 13px}.nav-link:after{display:none}.nav-link.active{background:var(--primary-soft)}
  .top-actions{display:none}.mobile-menu-button{display:grid}
  .weather-hero{min-height:390px;flex-direction:column;padding:28px 25px}.hero-side{min-width:0;width:100%;align-items:flex-start;gap:18px}.updated-chip{position:absolute;right:0;top:-270px}.hero-minmax{max-width:none}.hero-temperature{font-size:calc(92px * var(--text-scale))}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .overview-lower-grid,.graph-grid,.rain-graph-grid{grid-template-columns:1fr}.forecast-panel{grid-column:auto}.forecast-summary-grid{grid-template-columns:repeat(3,1fr)}
  .rain-summary-grid{grid-template-columns:repeat(2,1fr)}
  .section-title-row{align-items:flex-start;flex-direction:column;justify-content:flex-end}.source-badge{align-self:flex-start}
  .footer{align-items:flex-start;flex-direction:column;gap:10px}
}
@media (max-width:560px){
  .weather-hero{min-height:360px;padding:23px 20px;border-radius:20px}.location-row{font-size:calc(20px * var(--text-scale))}.eyebrow{margin-left:0}.hero-temperature{font-size:calc(78px * var(--text-scale));letter-spacing:-4px}.hero-unit{font-size:calc(34px * var(--text-scale))}.hero-condition-row img{width:58px;height:58px}.updated-chip{top:-248px;font-size:calc(11px * var(--text-scale))}.hero-minmax div{padding:12px}.hero-minmax strong{font-size:calc(16px * var(--text-scale))}
  .metric-grid{grid-template-columns:1fr 1fr;gap:8px}.metric-card{min-height:103px;padding:13px 12px;gap:8px}.metric-icon{width:34px;height:34px;flex-basis:34px}.metric-icon svg{width:19px;height:19px}.metric-card strong{font-size:calc(18px * var(--text-scale))}.metric-card div>span{font-size:calc(11px * var(--text-scale))}.metric-card em{font-size:calc(10px * var(--text-scale))}
  .overview-lower-grid{gap:10px}.panel{padding:15px;border-radius:17px}.hourly-strip{grid-template-columns:repeat(8,68px)}
  .forecast-summary-grid{grid-template-columns:repeat(2,1fr);gap:8px}.day-card{padding:14px 10px}.rain-summary-grid{grid-template-columns:1fr 1fr;gap:8px}.rain-summary-card{min-height:105px;padding:16px}.rain-summary-card strong{font-size:calc(24px * var(--text-scale))}
  .section-title-row h1{font-size:calc(26px * var(--text-scale))}.range-switcher{width:100%}.range-switcher button{flex:1}.chart-wrap{height:285px}.chart-wrap.compact{height:200px}
}
.icon-button.is-refreshing svg { animation: spin .7s linear infinite; }
.icon-button:disabled { cursor: wait; opacity: .72; }
@keyframes spin { to { transform: rotate(360deg); } }
.load-error { color: var(--muted); font-size:calc(13px * var(--text-scale)); padding: 20px 4px; }


/* Mobile layout hardening */
@media (max-width: 900px) {
  .app-shell { width:100%; max-width:100%; padding:8px 10px 20px; }
  .topbar { width:100%; max-width:100%; gap:10px; border-radius:16px; }
  .brand { font-size:calc(21px * var(--text-scale)); gap:8px; }
  .brand-mark { width:36px; flex:0 0 36px; }
  .weather-hero { width:100%; max-width:100%; min-height:0; display:grid; grid-template-columns:1fr; gap:24px; padding:26px 22px; }
  .hero-copy, .hero-side { width:100%; min-width:0; }
  .hero-side { display:flex; flex-direction:column; align-items:stretch; gap:14px; }
  .updated-chip { position:static; align-self:flex-start; }
  .hero-minmax { width:100%; max-width:none; }
  .hero-temperature { font-size:clamp(68px, 18vw, 92px); }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-lower-grid, .graph-grid, .rain-graph-grid { grid-template-columns:minmax(0,1fr); }
  .forecast-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rain-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .forecast-table-wrap { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .forecast-table { min-width:720px; }
  .chart-wrap { width:100%; min-width:0; }
  .footer { padding-left:6px; padding-right:6px; }
}

@media (max-width: 560px) {
  .app-shell { padding:6px 7px 16px; }
  .topbar { min-height:58px; padding:7px 8px 7px 10px; top:4px; }
  .brand { font-size:calc(19px * var(--text-scale)); }
  .brand-mark { transform:scale(.78); width:31px; margin-right:-4px; }
  .mobile-menu-button { width:38px; height:38px; border-radius:11px; }
  .main-nav { top:64px; }
  .weather-hero { border-radius:18px; padding:22px 16px 18px; gap:18px; }
  .location-row { font-size:calc(19px * var(--text-scale)); }
  .location-row svg { width:20px; height:20px; }
  .eyebrow { margin:5px 0 10px 30px; font-size:calc(13px * var(--text-scale)); }
  .temperature-line { flex-wrap:nowrap; }
  .hero-temperature { font-size:clamp(62px, 22vw, 82px); letter-spacing:-4px; }
  .hero-unit { font-size:calc(31px * var(--text-scale)); margin-left:7px; }
  .hero-condition-row { margin-top:12px; }
  .hero-condition-row img { width:52px; height:52px; }
  .hero-condition-row strong { font-size:calc(16px * var(--text-scale)); }
  .hero-condition-row span { font-size:calc(12px * var(--text-scale)); }
  .hero-minmax { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hero-minmax div { min-width:0; padding:13px 11px; }
  .hero-minmax > div > span { font-size:calc(11px * var(--text-scale)); }
  .hero-minmax strong { font-size:calc(21px * var(--text-scale)); white-space:nowrap; }
  .metric-grid { grid-template-columns:minmax(0,1fr); gap:8px; margin:9px 0; }
  .metric-card { min-height:78px; padding:12px 13px; }
  .metric-card strong { font-size:calc(20px * var(--text-scale)); }
  .panel { padding:14px 12px; border-radius:16px; }
  .panel-heading { gap:8px; }
  .panel h2 { font-size:calc(15px * var(--text-scale)); }
  .forecast-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rain-summary-grid { grid-template-columns:minmax(0,1fr); }
  .section-title-row { min-height:0; padding:18px 4px 14px; gap:12px; }
  .section-title-row h1 { font-size:calc(25px * var(--text-scale)); }
  .section-title-row p { font-size:calc(12px * var(--text-scale)); line-height:1.5; }
  .range-switcher { max-width:100%; }
  .chart-wrap { height:250px; }
  .chart-wrap.compact { height:190px; }
  .footer { font-size:calc(11px * var(--text-scale)); }
}

@media (max-width: 390px) {
  .hero-minmax { grid-template-columns:1fr; }
  .forecast-summary-grid { grid-template-columns:1fr; }
  .hero-temperature { font-size:calc(64px * var(--text-scale)); }
  .hero-unit { font-size:calc(28px * var(--text-scale)); }
}

/* MeteoHB Local forecast */
.local-source-badge { background:#eef8ff; color:#0d6fbe; border-color:#cfe8fb; }
.forecast-title-row { align-items:flex-end; }
.forecast-insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.forecast-insight-card { min-height:156px; display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:start; padding:19px; }
.insight-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; color:var(--primary); background:var(--primary-soft); }
.insight-icon.radar { color:#0d8dab; background:#e9fbff; }
.insight-icon.learn { color:#268d54; background:#edf9f1; }
.insight-icon svg { width:23px; height:23px; }
.forecast-insight-card h2 { margin:1px 0 7px; font-size:calc(17px * var(--text-scale)); }
.forecast-insight-card p { margin:0; color:#52637a; font-size:calc(12.5px * var(--text-scale)); line-height:1.55; }
.insight-meta { display:block; margin-top:9px; color:var(--muted); font-size:calc(10.5px * var(--text-scale)); line-height:1.45; }
.model-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.model-chip { display:inline-flex; align-items:center; gap:6px; min-height:25px; padding:4px 8px; border-radius:9px; background:#f5f8fc; color:#62738a; font-size:calc(10px * var(--text-scale)); font-weight:700; border:1px solid #ebf0f6; }
.model-chip i { width:6px; height:6px; border-radius:50%; background:#a5b1c1; }
.model-chip.ok i { background:var(--green); }
.model-chip.error i { background:var(--danger); }
.model-chip.fallback i { background:var(--amber); }
.local-forecast-chart-panel { margin-bottom:14px; padding:20px 22px 14px; }
.forecast-chart-heading { align-items:center; }
.forecast-generated { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:calc(11px * var(--text-scale)); font-weight:650; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(46,174,99,.1); }
.forecast-main-chart { height:330px; }
.forecast-confidence-legend { display:flex; justify-content:flex-end; gap:14px; padding:3px 4px 0; color:var(--muted); font-size:calc(10px * var(--text-scale)); }
.forecast-confidence-legend span { display:flex; align-items:center; gap:5px; }
.confidence-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.confidence-dot.high { background:#2eae63; }.confidence-dot.medium { background:#f59e0b; }.confidence-dot.low { background:#ef4444; }
.forecast-primary-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:16px 5px 10px; }
.forecast-primary-heading h2 { margin:2px 0 0; font-size:calc(20px * var(--text-scale)); letter-spacing:-.4px; }
.forecast-primary-heading p { max-width:650px; margin:0; color:var(--muted); font-size:calc(11.5px * var(--text-scale)); line-height:1.5; text-align:right; }
.extended-heading { margin-top:7px; }
.local-hourly-grid { width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(118px,126px); gap:9px; overflow-x:auto; padding:2px 2px 13px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.local-hour-card { scroll-snap-align:start; min-height:202px; padding:12px 11px 10px; border-radius:17px; border:1px solid var(--border); background:var(--surface); box-shadow:0 5px 15px rgba(34,68,112,.055); display:flex; flex-direction:column; align-items:center; }
.local-hour-card.radar-window { border-color:#bfe5f5; background:linear-gradient(180deg,#f5fcff,#fff 46%); }
.local-hour-top { width:100%; display:flex; justify-content:space-between; align-items:center; gap:4px; color:#697991; font-size:calc(10.5px * var(--text-scale)); font-weight:750; text-transform:capitalize; }
.local-hour-top em { font-style:normal; color:#0d8dab; background:#e5f9ff; border-radius:7px; padding:3px 5px; font-size:calc(7.5px * var(--text-scale)); letter-spacing:.06em; }
.local-hour-card > img { width:55px; height:55px; object-fit:contain; margin:5px 0 1px; }
.local-hour-card > strong { font-size:calc(22px * var(--text-scale)); letter-spacing:-.6px; }
.local-condition { min-height:27px; color:var(--muted); font-size:calc(10px * var(--text-scale)); margin-top:2px; text-align:center; }
.local-hour-stats { width:100%; display:flex; justify-content:space-between; gap:5px; margin-top:7px; color:#5e7189; font-size:calc(8.8px * var(--text-scale)); font-weight:700; }
.local-hour-stats span { display:flex; align-items:center; gap:2px; }
.local-hour-stats svg { width:10px; height:10px; }
.confidence-bar { width:100%; height:4px; margin-top:10px; border-radius:4px; overflow:hidden; background:#edf2f7; }
.confidence-bar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#f2b43b,#38aa68); }
.local-hour-card small { margin-top:5px; color:#8390a2; font-size:calc(8.5px * var(--text-scale)); }
.local-day-card { min-height:186px; }
.local-day-card .day-rain { display:flex; justify-content:center; align-items:center; gap:4px; }
.local-day-card .day-rain svg { width:12px; height:12px; }
.day-extra { margin-top:6px; color:#8390a2; font-size:calc(9.5px * var(--text-scale)); }
.local-detail-panel { margin-top:14px; }
.local-forecast-table { min-width:1120px; }
.detail-hint { color:var(--muted); font-size:calc(10px * var(--text-scale)); }
.confidence-pill { display:inline-flex; justify-content:center; min-width:50px; padding:5px 8px; border-radius:9px; font-size:calc(10px * var(--text-scale)); font-weight:800; }
.confidence-pill.high { background:#eaf8ef; color:#237d49; }
.confidence-pill.medium { background:#fff6df; color:#9b6500; }
.confidence-pill.low { background:#fff0f0; color:#bd3f3f; }
.forecast-attribution { margin:11px 5px 0; color:#8390a2; font-size:calc(10px * var(--text-scale)); line-height:1.45; }

@media (max-width: 1100px) {
  .forecast-insight-grid { grid-template-columns:1fr 1fr; }
  .forecast-insight-card.engine-card { grid-column:1/-1; }
}
@media (max-width: 900px) {
  .forecast-title-row { align-items:flex-start; }
  .forecast-insight-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .forecast-insight-card.engine-card { grid-column:auto; }
  .forecast-insight-card { min-height:0; }
  .forecast-primary-heading { align-items:flex-start; flex-direction:column; gap:5px; padding-top:12px; }
  .forecast-primary-heading p { text-align:left; max-width:none; }
  .forecast-main-chart { height:290px; }
}
@media (max-width: 560px) {
  .forecast-insight-card { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:14px 12px; border-radius:15px; }
  .insight-icon { width:38px; height:38px; border-radius:12px; }
  .insight-icon svg { width:20px; height:20px; }
  .forecast-insight-card h2 { font-size:calc(15px * var(--text-scale)); }
  .forecast-insight-card p { font-size:calc(11.5px * var(--text-scale)); }
  .model-chip { font-size:calc(9px * var(--text-scale)); }
  .local-forecast-chart-panel { padding:14px 10px 10px; }
  .forecast-chart-heading { flex-direction:column; align-items:flex-start; }
  .forecast-main-chart { height:260px; }
  .forecast-confidence-legend { justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .forecast-primary-heading { padding-left:2px; padding-right:2px; }
  .forecast-primary-heading h2 { font-size:calc(18px * var(--text-scale)); }
  .local-hourly-grid { grid-auto-columns:112px; gap:7px; }
  .local-hour-card { min-height:194px; padding:11px 9px 9px; }
  .local-detail-panel .panel-heading { flex-direction:column; }
  .detail-hint { display:block; }
  .local-forecast-table { min-width:1080px; }
}


/* Accessibility: persistent text-size preference */
.text-size-wrap { position:relative; flex:0 0 auto; }
.text-size-button { background:#f4f8fd; color:#315b8e; }
.text-size-symbol { display:inline-flex; align-items:flex-start; font-size:calc(17px * var(--text-scale)); font-weight:850; line-height:1; letter-spacing:-.03em; }
.text-size-symbol span { margin:-2px 0 0 1px; font-size:calc(10px * var(--text-scale)); }
.text-size-popover { position:absolute; z-index:100; top:48px; right:0; width:min(310px,calc(100vw - 24px)); padding:16px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 16px 40px rgba(20,45,80,.18); }
.text-size-popover[hidden] { display:none; }
.text-size-popover strong { display:block; font-size:calc(15px * var(--text-scale)); }
.text-size-popover p { margin:5px 0 12px; color:var(--muted); font-size:calc(12px * var(--text-scale)); line-height:1.45; }
.text-size-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.text-size-options button { min-height:43px; border:1px solid var(--border); border-radius:11px; background:#f7f9fc; color:#4c5d73; font-weight:750; font-size:calc(12px * var(--text-scale)); }
.text-size-options button.active { border-color:#9bc8ff; background:var(--primary-soft); color:var(--primary); box-shadow:inset 0 0 0 1px rgba(24,119,242,.08); }
html[data-text-size="large"] .hero-temperature { font-size:clamp(82px, 8.5vw, 136px); }
html[data-text-size="large"] .hero-unit { font-size:56px; }
html[data-text-size="large"] .forecast-main-chart,
html[data-text-size="large"] .chart-wrap { min-height:310px; }

@media (max-width:900px) {
  .text-size-wrap { margin-left:auto; }
  .mobile-menu-button { margin-left:0; }
}
@media (max-width:560px) {
  .text-size-button { width:38px; height:38px; border-radius:11px; }
  .text-size-popover { position:fixed; top:70px; right:8px; left:8px; width:auto; }
  html[data-text-size="large"] .hero-temperature { font-size:clamp(67px, 20vw, 86px); }
  html[data-text-size="large"] .hero-unit { font-size:38px; }
}