@font-face{font-family:RobotoPFW;src:url('../fonts/roboto-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:NotoThaiPFW;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);--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:RobotoPFW,NotoThaiPFW,system-ui,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
body[data-language=th]{font-family:NotoThaiPFW,RobotoPFW,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)}
.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:#fff}.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,#fff 10%,#eef7fc 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:rgba(255,255,255,.72);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:14px}.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:#fff;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}}