@font-face{font-family:RobotoCMAW;src:url('../fonts/roboto-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:NotoThaiCMAW;src:url('../fonts/noto-sans-thai-thai-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Material Symbols Rounded';src:url('../fonts/material-symbols-rounded.woff2?v=icons-1') format('woff2');font-weight:400;font-style:normal;font-display:block}
:root{--bg:#f4f8fa;--surface:#fff;--ink:#091a28;--muted:#596b78;--blue:#0c6db2;--blue-soft:#e8f4fc;--green:#148c57;--green-soft:#e4f5ec;--amber:#b66a00;--amber-soft:#fff2dc;--red:#c73535;--red-soft:#feecec;--purple:#7252a5;--border:#d6e0e5;--shadow:0 8px 30px rgba(28,65,90,.08);--chart-fill:rgba(12,109,178,.10);--chart-grid:#e7eef2;--radius:22px;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{background:#dbe5eb;color-scheme:light;scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#dbe5eb;font-family:RobotoCMAW,NotoThaiCMAW,system-ui,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
body[data-language=th]{font-family:NotoThaiCMAW,RobotoCMAW,system-ui,sans-serif}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
button,select,a{font:inherit}.material-symbols{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:999;top:-80px;left:12px;padding:12px 16px;background:var(--ink);color:#fff;border-radius:10px}.skip-link:focus{top:12px}
.app-shell{position:relative;width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:var(--bg);box-shadow:0 0 40px rgba(14,40,56,.15);overflow-x:hidden;padding-bottom:calc(84px + var(--safe-bottom))}
.app-bar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:rgba(244,248,250,.95);border-bottom:1px solid rgba(214,224,229,.8);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand{min-height:48px;display:flex;align-items:center;gap:10px;color:var(--ink)}.brand:hover{text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:13px;background:var(--blue);color:#fff;display:grid;place-items:center}.brand-mark .material-symbols{font-size:22px}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:15px;letter-spacing:-.01em}.brand-copy small{font-size:10px;color:var(--muted);margin-top:3px}
.language-button{min-width:66px;min-height:44px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:12px;font-weight:700;color:var(--blue)}.app-actions{display:flex;align-items:center;gap:6px}.theme-button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--blue);cursor:pointer}.theme-button .material-symbols{font-size:21px}
.offline-banner{position:sticky;top:64px;z-index:19;padding:8px 16px;text-align:center;background:#182b3a;color:#fff;font-size:12px;font-weight:700}.offline-banner[hidden]{display:none}
.main-content{padding:20px 16px 8px}.hero-heading{margin:4px 2px 18px}.hero-heading>div{display:flex;align-items:center;gap:9px}.hero-heading h1,.page-heading h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.035em}.eyebrow,.kicker{margin:0 0 5px;text-transform:uppercase;font-size:10px;line-height:1.2;letter-spacing:.12em;font-weight:800;color:var(--muted)}.status-dot{width:9px;height:9px;background:var(--green);border:2px solid #caeedc;border-radius:50%}
.page-heading{margin:4px 2px 20px}.page-heading p{color:var(--muted);margin:8px 0 0;max-width:37ch}.back-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px 0 6px;font-weight:700}.back-link .material-symbols{font-size:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:0 0 14px;box-shadow:var(--shadow)}.card h2{font-size:17px;margin:0;line-height:1.3}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card-heading>span:not(.badge){font-size:12px;color:var(--muted)}
.level-card{padding:20px}.level-reading{display:flex;align-items:baseline;gap:6px;margin:19px 0 0}.level-reading span{font-size:57px;line-height:.95;font-weight:800;letter-spacing:-.055em}.level-reading small{font-size:19px;color:var(--muted);font-weight:700}.level-reading.compact{margin:16px 0 4px}.level-reading.compact span{font-size:43px}.muted{color:var(--muted);font-size:12px;margin:8px 0}
.badge{display:inline-flex;align-items:center;justify-content:center;min-height:27px;padding:4px 9px;border-radius:999px;font-size:10px;line-height:1;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:#edf1f3;color:var(--muted)}.badge-live,.badge-current,.badge-active{background:var(--green-soft);color:#0b6940}.badge-delayed,.badge-aging{background:var(--amber-soft);color:#754300}.badge-stale,.badge-offline{background:#edf0f2;color:#53616b}.badge-cleared{background:#edf0f2;color:#53616b}
.metric-grid{display:grid;margin-top:18px;border-top:1px solid var(--border);padding-top:15px}.metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric-grid>div{min-width:0}.metric-grid>div+div{border-left:1px solid var(--border);padding-left:10px}.metric-grid span{display:block;min-height:29px;color:var(--muted);font-size:10px;line-height:1.25}.metric-grid strong{display:block;font-size:13px;line-height:1.25;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.risk-card{display:grid;grid-template-columns:44px 1fr;gap:13px;padding:17px;border-radius:18px;margin:0 0 14px;border:1px solid var(--border);background:var(--surface)}.risk-card h2,.advisory h2{font-size:20px;margin:0 0 3px}.risk-card p,.advisory p{margin:0;font-size:13px}.risk-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#edf1f3;color:var(--muted)}
.severity-normal,.severity-low{border-color:#b9dfca}.severity-normal .risk-icon,.severity-low .risk-icon{background:var(--green-soft);color:var(--green)}.severity-watch,.severity-moderate{border-color:#f0ce95}.severity-watch .risk-icon,.severity-moderate .risk-icon{background:var(--amber-soft);color:var(--amber)}.severity-warning,.severity-high{border-color:#f0b0a7}.severity-warning .risk-icon,.severity-high .risk-icon{background:#fff0e9;color:#c85032}.severity-critical,.severity-very_high{border-color:#e89c9c}.severity-critical .risk-icon,.severity-very_high .risk-icon{background:var(--red-soft);color:var(--red)}.severity-unknown{border-color:#cfd6dc}.severity-unknown .risk-icon{background:#edf1f3;color:#596b78}
.chart-card{padding:18px 14px}.chart-card .card-heading{padding:0 4px 12px}.chart-wrap{position:relative;height:180px;width:100%}.chart-wrap.tall{height:260px}.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:24px}.empty[hidden]{display:none}
.station-rows{margin-top:12px}.station-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 2px;color:var(--ink);border-top:1px solid var(--border)}.station-row:hover{text-decoration:none}.station-row span{display:flex;flex-direction:column}.station-row small{font-size:11px;color:var(--muted);margin-top:2px}.station-value{text-align:right;align-items:flex-end;font-variant-numeric:tabular-nums}.station-value:first-line{font-weight:700}
.weather-card{background:linear-gradient(145deg,var(--surface) 10%,var(--blue-soft) 100%)}.weather-symbol{color:var(--blue);font-size:32px!important}.weather-metrics strong{color:var(--blue)}.range-note{font-size:11px;color:var(--muted);margin:14px 0 0}.attribution{font-size:11px;margin:8px 0 0}.forecast-horizons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:15px}.forecast-horizons>div{min-width:0;padding:9px 4px;text-align:center;background:color-mix(in srgb,var(--surface) 74%,transparent);border:1px solid var(--border);border-radius:10px}.forecast-horizons span,.forecast-horizons strong{display:block}.forecast-horizons span{font-size:9px;color:var(--muted)}.forecast-horizons strong{font-size:10px;margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.advisory{display:grid;grid-template-columns:36px 1fr;gap:12px;border-radius:18px;padding:18px;background:var(--ink);color:#fff;margin-bottom:14px}.advisory>.material-symbols{font-size:30px;color:#8dcdf4}.advisory .kicker{color:#a8bac6}.advisory.severity-warning,.advisory.severity-high{background:#74381f}.advisory.severity-critical,.advisory.severity-very_high{background:#6e2028}.advisory.severity-watch,.advisory.severity-moderate{background:#664a14}.advisory.severity-unknown{background:#3e505c}
.updated{text-align:center;color:var(--muted);font-size:11px;margin:20px 0}.stations-grid{display:grid;gap:0}.station-card{margin:0}.button-link{min-height:44px;display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:10px -7px -8px 0;font-weight:700;font-size:13px}.button-link .material-symbols{font-size:20px}.datum-note{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:12px;padding:6px 3px}.datum-note .material-symbols{font-size:18px;flex:none}.detail-summary{text-align:center}.detail-summary .card-heading{align-items:center}.detail-summary .level-reading{justify-content:center}.threshold-list{margin-top:12px}.threshold-list>div{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:12px 0;border-top:1px solid var(--border)}.threshold-list a{grid-column:1/-1;font-size:11px}.select-label select{min-width:76px;min-height:44px;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0 10px;color:var(--ink)}
.alert-list{display:grid;gap:14px}.alert-item{margin:0;border-left-width:5px}.alert-item p{font-size:13px}.pending-note{background:var(--amber-soft);color:#6e450e;padding:10px;border-radius:10px}.empty-state{min-height:220px;display:grid;place-content:center;justify-items:center;gap:9px;text-align:center;color:var(--muted)}.empty-state .material-symbols{font-size:40px}.notice{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:14px;margin-bottom:14px;font-size:13px}.notice-unknown{background:#edf1f3;color:#354753}
.offline-full{min-height:90vh}
.page-footer{padding:16px 20px 24px;text-align:center;color:var(--muted);font-size:10px}.page-footer p{margin:5px 0}.bottom-nav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:calc(80px + var(--safe-bottom));padding:7px 18px var(--safe-bottom);display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.97);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(28,65,90,.07);backdrop-filter:blur(12px)}.bottom-nav a{min-width:64px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:14px;color:var(--muted);font-size:10px;font-weight:700}.bottom-nav a:hover{text-decoration:none}.bottom-nav a[aria-current=page]{background:var(--blue-soft);color:var(--blue)}.bottom-nav .material-symbols{font-size:23px}
@media (min-width:700px){.app-shell{margin:18px auto;min-height:calc(100vh - 36px);border-radius:28px}.bottom-nav{bottom:18px;border-radius:0 0 28px 28px}.app-bar{border-radius:28px 28px 0 0}}
@media (max-width:370px){.main-content{padding-left:12px;padding-right:12px}.app-bar{padding-left:12px;padding-right:12px}.brand-copy small{display:none}.metric-grid span{font-size:9px}.level-reading span{font-size:51px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media (forced-colors:active){.card,.risk-card,.advisory{border:2px solid CanvasText}.status-dot{border:1px solid CanvasText}}

/* V1.1 accessibility and notification controls. */
.brand-copy small,.eyebrow,.kicker,.badge,.metric-grid span,.forecast-horizons span,.forecast-horizons strong,.page-footer,.bottom-nav a{font-size:11px}
.badge{letter-spacing:.05em}.bottom-nav a{gap:3px}
.nav-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:11px;background:var(--blue-soft);color:var(--blue)}
.nav-stations .nav-icon{background:#e3f6f3;color:#087d72}.nav-alerts .nav-icon{background:var(--amber-soft);color:var(--amber)}.bottom-nav a[aria-current=page] .nav-icon{background:transparent;color:inherit}.bottom-nav .material-symbols{font-size:22px}
.trend-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.trend-grid>div{min-width:0;text-align:center}.trend-grid span,.trend-grid strong{display:block;font-variant-numeric:tabular-nums}.trend-grid span{font-size:11px;color:var(--muted)}.trend-grid strong{font-size:11px;margin-top:4px;overflow-wrap:anywhere}
.inline-status{margin:10px 4px 0;color:var(--red);font-size:12px;font-weight:700}.inline-status[hidden]{display:none}.notice-stale{background:var(--amber-soft);color:#6e450e}.rapid-rise{color:var(--amber)!important;font-weight:800}.badge-inline{align-self:flex-end;margin-top:5px}
.notice[hidden]{display:none}
.push-settings p{font-size:12px}.push-symbol{color:var(--blue);font-size:30px!important}.push-status{min-height:38px;padding:9px 11px;border-radius:11px;background:var(--bg);color:var(--muted)}.push-settings[data-state=subscribed] .push-status{background:var(--green-soft);color:#0b6940}.push-settings[data-state=denied] .push-status,.push-settings[data-state=error] .push-status{background:var(--red-soft);color:#872424}.push-settings[data-state=install_required] .push-status{background:var(--amber-soft);color:#6e450e}
.primary-button{width:100%;min-height:48px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;padding:11px 16px;cursor:pointer}.primary-button:hover{background:#095b96}.primary-button:focus-visible,.language-button:focus-visible,.bottom-nav a:focus-visible,.button-link:focus-visible{outline:3px solid #ffb000;outline-offset:2px}.primary-button:disabled{opacity:.6;cursor:wait}.primary-button[hidden]{display:none}
@media (forced-colors:active){.nav-icon,.primary-button{border:2px solid CanvasText}.primary-button{background:ButtonFace;color:ButtonText}.bottom-nav a[aria-current=page]{outline:2px solid Highlight}}

/* Station preference, river order, and theme controls. */
.home-station-picker{display:grid;gap:5px;margin:0 0 14px}.home-station-picker>span{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.home-station-picker select{width:100%;min-height:46px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--ink);padding:0 38px 0 12px;font-weight:700}.selection-note{margin:10px 0 0;color:var(--muted);font-size:11px}.river-end{display:flex;align-items:center;justify-content:center;min-height:34px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.river-arrow{height:34px;display:grid;place-items:center;color:var(--blue)}.river-arrow .material-symbols{font-size:20px}.station-card.is-home{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent),var(--shadow)}.station-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.role-badge{display:inline-flex;align-items:center;min-height:27px;padding:4px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:800}.station-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.station-actions .button-link{margin:0 -7px -2px 0}.secondary-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--blue);padding:8px 11px;font-size:12px;font-weight:800;cursor:pointer}.secondary-button .material-symbols{font-size:19px}.secondary-button[aria-pressed=true]{background:var(--blue-soft);border-color:var(--blue)}.detail-home-button{margin:14px auto 0}.theme-button:focus-visible,.secondary-button:focus-visible,.home-station-picker select:focus-visible{outline:3px solid #ffb000;outline-offset:2px}

/* Leaflet + live OpenStreetMap station layer. */
.leaflet-station-map{height:480px;background:#d8e3e9}.leaflet-container{font-family:RobotoCMAW,NotoThaiCMAW,system-ui,sans-serif;color:#172733}.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;font-size:22px!important}.leaflet-touch .leaflet-bar a:first-child{border-radius:11px 11px 0 0}.leaflet-touch .leaflet-bar a:last-child{border-radius:0 0 11px 11px}.leaflet-control-attribution{max-width:210px;padding:4px 6px!important;border-radius:0 0 0 8px;background:rgba(255,255,255,.9)!important;font-size:9px!important;line-height:1.25!important}.leaflet-control-attribution a{color:#075f9e}.leaflet-station-icon{display:flex!important;align-items:center;justify-content:center;gap:5px;border:1px solid #bacbd5;border-radius:12px;background:#fff;color:#0a2638;box-shadow:0 3px 12px rgba(9,26,40,.25);font-size:11px;font-weight:800}.leaflet-station-icon span{width:8px;height:8px;border-radius:50%;background:#778994}.leaflet-station-icon.freshness-live span{background:#148c57}.leaflet-station-icon.freshness-delayed span,.leaflet-station-icon.freshness-stale span{background:#c37709}.leaflet-station-icon.role-primary{border:2px solid #c77c08}.leaflet-station-icon.is-selected{border-color:#0c6db2;background:#0c6db2;color:#fff;box-shadow:0 0 0 3px rgba(12,109,178,.25),0 4px 13px rgba(9,26,40,.3)}.leaflet-station-icon:focus{outline:3px solid #ffb000;outline-offset:3px}.station-map-popup{display:grid;gap:3px;min-width:175px}.station-map-popup strong{font-size:15px;color:#091a28}.station-map-popup span{display:block;font-size:12px;color:#455966}.station-map-popup a{display:inline-flex;align-items:center;min-height:36px;margin-top:4px;font-weight:800}.map-tile-error{position:absolute;z-index:1000;left:12px;right:12px;bottom:12px;margin:0;padding:10px;border:1px solid #b66a00;border-radius:10px;background:#fff2dc;color:#6e450e;font-size:11px}.leaflet-popup-content-wrapper{border-radius:14px}.leaflet-popup-content{margin:14px 16px}
.marker-cluster{border-radius:50%;background:rgba(12,109,178,.2)}.marker-cluster div{display:grid;place-items:center;width:34px;height:34px;margin:5px;border-radius:50%;background:#0c6db2;color:#fff;font-size:13px;font-weight:900}.marker-cluster span{line-height:1}.marker-cluster:focus{outline:3px solid #ffb000;outline-offset:3px}
html[data-theme=dark] .leaflet-tile-pane{filter:brightness(.72) contrast(1.08) saturate(.72)}html[data-theme=dark] .leaflet-control-zoom a{background:#13232e;color:#edf6fa;border-color:#2d4350}html[data-theme=dark] .leaflet-control-attribution{background:rgba(19,35,46,.92)!important;color:#c0d0da}html[data-theme=dark] .leaflet-control-attribution a{color:#78c9f8}html[data-theme=dark] .leaflet-station-icon{background:#13232e;color:#edf6fa;border-color:#507080}html[data-theme=dark] .leaflet-station-icon.is-selected{background:#347fac;border-color:#7ac6f4}html[data-theme=dark] .leaflet-popup-content-wrapper,html[data-theme=dark] .leaflet-popup-tip{background:#13232e;color:#edf6fa}html[data-theme=dark] .station-map-popup strong{color:#edf6fa}html[data-theme=dark] .station-map-popup span{color:#b4c5cf}
@media (max-width:370px){.leaflet-station-map{height:450px}.leaflet-control-attribution{max-width:180px}}
@media (forced-colors:active){.leaflet-station-icon,.leaflet-control-zoom a{border:2px solid CanvasText}.leaflet-station-icon.is-selected{outline:3px solid Highlight}}

/* Chiang Mai Air Watch keeps a focused mobile shell at every viewport. */
.app-shell{max-width:430px!important}.desktop-nav{display:none!important}.dashboard-layout{display:block!important}.main-content{padding:20px 16px 8px!important}.bottom-nav{display:grid!important}.stations-grid{display:grid!important;grid-template-columns:1fr!important}.aqi-reading{display:flex;align-items:baseline;gap:8px;margin:20px 0 6px}.aqi-reading span{font-size:64px;line-height:.9;font-weight:850;letter-spacing:-.055em}.aqi-reading small{font-weight:800;color:var(--muted)}.aqi-reading.compact span{font-size:46px}.pollutant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:20px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}.pollutant-grid div{background:var(--surface);padding:13px}.pollutant-grid span,.pollutant-grid strong{display:block}.pollutant-grid span{font-size:11px;color:var(--muted)}.pollutant-grid strong{margin-top:4px;font-size:13px}.forecast-risk{display:flex;align-items:baseline;justify-content:space-between;margin-top:18px;padding:14px;border-radius:13px;background:var(--surface)}.trend-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.station-map{height:480px}.detail-summary{text-align:left}.detail-summary .aqi-reading{justify-content:center}.severity-very_good{border-color:#8ec9da}.severity-good{border-color:#b9dfca}.severity-unhealthy{border-color:#f0b0a7}.severity-very_unhealthy{border-color:#e89c9c}.app-bar{grid-template-columns:none!important}.brand-copy small{display:block!important}