/* เว็บสาธารณะ MAYDAY: ผลงาน · โครงการ · ลิงก์การเงิน/บริจาค (ใช้โทเค็นสีจาก /app.css และหัวจาก /donate/donate.css) */
.site-top{flex-wrap:wrap;row-gap:6px}
.site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:12px}
.site-nav a{color:var(--top-mute);text-decoration:none;font-weight:600;font-size:14.5px;padding:7px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--top-ink);background:rgba(255,255,255,.08)}
.site-nav .nav-donate{background:var(--brand);color:#121212!important}
.site-nav .nav-help{color:#ff8a80}
@media (pointer:coarse){.site-nav a,.site-foot a{min-height:44px}.site-foot a{display:inline-flex;align-items:center}.logo{min-height:44px}}
@media (max-width:760px){.site-nav{order:3;width:100%;margin:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.site-nav::-webkit-scrollbar{display:none}}
.hero2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--hero);color:var(--hero-ink);border-radius:24px;padding:clamp(20px,4vw,40px)}
@media (max-width:760px){.hero2{grid-template-columns:1fr}}
.hero2 h1{color:var(--hero-ink)}.hero2 .lead{color:var(--hero-mute)}
.hero2 .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero2 .cta a{text-decoration:none}
.hero2 .btn.primary{background:var(--brand);color:#121212}
.hero2 .btn.ghost{background:rgba(255,255,255,.08);color:var(--hero-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hero2 .btn.help{background:#d9392b;color:#fff;box-shadow:none}
.hero-big{display:grid;gap:4px;justify-items:start}
.hero-big b{font-size:clamp(44px,9vw,80px);line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.hero-big span{color:var(--hero-mute)}
.kpis6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.kpis6{grid-template-columns:1fr 1fr}}
.kpi6{background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:2px}
.kpi6 span{display:flex;align-items:center;gap:6px;color:var(--ink2);font-size:13.5px}
.kpi6 b{font-size:clamp(22px,4.6vw,32px);font-variant-numeric:tabular-nums;line-height:1.2}
.kpi6 small{color:var(--muted)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:8px 0 0}
.sec-h h2{margin:0;font-size:clamp(19px,3vw,24px)}
.sec-h a{color:var(--ink2);font-weight:600;text-decoration:none;white-space:nowrap}
#areamap{height:clamp(260px,40vh,420px);border-radius:16px;overflow:hidden;position:relative;z-index:0;isolation:isolate}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pcard{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s}
.pcard:hover{transform:translateY(-2px)}
.pcover{aspect-ratio:16/9;background:var(--hero);display:grid;place-items:center;overflow:hidden}
.pcover img{width:100%;height:100%;object-fit:cover}
.pcover svg{width:56px;height:64px;opacity:.5}
.pbody{padding:14px 16px 16px;display:grid;gap:8px;flex:1;align-content:start}
.pbody h3{margin:0;font-size:17px;line-height:1.35}
.pbody p{margin:0;color:var(--ink2);font-size:14px}
.pstat{justify-self:start;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--grid);color:var(--ink2)}
.pstat.active{background:var(--brand);color:#121212}.pstat.done{background:color-mix(in srgb,var(--good) 25%,transparent);color:var(--good)}
.prog{display:grid;gap:4px;font-size:13px;color:var(--ink2)}
.prog .bar{height:8px;border-radius:99px;background:var(--grid);overflow:hidden}.prog .bar i{display:block;height:100%;background:var(--good);border-radius:99px}
.prog b{color:var(--ink);font-variant-numeric:tabular-nums}
.pdetail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.pdetail{grid-template-columns:1fr}}
.pdetail .pcover{border-radius:18px}
.pbodytext p{margin:0 0 12px;line-height:1.75;white-space:pre-wrap}
.site-foot{max-width:1180px;margin:20px auto 0;padding:24px clamp(14px,3vw,32px) calc(30px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;border-top:1px solid var(--line);color:var(--ink2)}
.site-foot p{margin:0}.site-foot nav{display:flex;flex-wrap:wrap;gap:14px}.site-foot a{color:var(--ink2)}
.help-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,#d9392b 14%,var(--surface));border-radius:18px;padding:16px 20px;box-shadow:inset 0 0 0 1px color-mix(in srgb,#d9392b 40%,transparent)}
.help-band b{font-size:18px}.help-band a{text-decoration:none}
.chart .bh{fill:var(--brand)}
/* สถานการณ์ฝน */
.rain-teaser{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:18px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:inherit}
.rain-teaser:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.rain-teaser .rt-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff}
.rain-teaser .rt-ic .ic{width:24px;height:24px}
.rain-teaser div{display:grid;gap:2px;min-width:0;flex:1}.rain-teaser div span{color:var(--ink2);font-size:14px}
.rain-teaser .rt-go{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink2);white-space:nowrap;font-size:14px}
@media (max-width:520px){.rain-teaser .rt-go{display:none}}
.rain-hero{background:var(--hero);color:var(--hero-ink);border-radius:24px;padding:clamp(20px,4vw,36px)}
.rain-hero h1{color:var(--hero-ink);margin:0 0 6px}.rain-hero .lead{color:var(--hero-mute);margin:0}
.rain-hero .upd{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;font-size:14px;color:var(--brand);background:rgba(255,255,255,.08);padding:5px 12px;border-radius:999px}
.rain-hero .upd.old{color:#ff8a80}
.kpi6.warn b{color:#f07a1a}.kpi6.bad b{color:#e5392f}
.kpi6 small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rainmap{height:clamp(320px,55vh,560px);border-radius:16px;overflow:hidden;position:relative;z-index:0;isolation:isolate}
.rlegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--ink2)}
.rlegend span{display:inline-flex;align-items:center;gap:6px}.rlegend i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.pbars{display:grid;gap:8px}
.pbar{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3.5em;align-items:center;gap:8px;font-size:14px}
.pbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar i{height:12px;border-radius:99px;background:var(--grid);overflow:hidden}.pbar em{display:block;height:100%;border-radius:99px}
.pbar b{text-align:right;font-variant-numeric:tabular-nums}
.tbl .rfc,.rfc{width:100%;min-width:0;border-collapse:separate;border-spacing:3px;font-size:14px}
.rfc th{font-weight:600;color:var(--ink2);text-align:center}.rfc th:first-child,.rfc td:first-child{text-align:left;white-space:nowrap}
.rfc td{text-align:center;border-radius:8px;padding:5px 6px;background:var(--grid);font-variant-numeric:tabular-nums}
.rfc td:first-child{background:none}
.rdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;height:180px;align-items:end}
.rdays div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.rdays i{width:70%;min-height:3px;border-radius:6px 6px 2px 2px}.rdays small{color:var(--ink2);font-size:12px;white-space:nowrap}.rdays .v{color:var(--ink)}
.wlist{display:grid;gap:6px}
.wrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--grid);font-size:14px}
.wrow span{flex:1;min-width:0}.wrow small{color:var(--muted)}.wrow b{white-space:nowrap;font-variant-numeric:tabular-nums}
.wrow.bad{background:color-mix(in srgb,#e5392f 16%,var(--surface))}.wrow.bad b{color:#e5392f}
.rwarn{margin:0 0 12px;line-height:1.7;white-space:pre-wrap}
.g2>.card{min-width:0}
.rfc td{padding:5px 4px;min-width:2.4em}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.site-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.org-mail{display:inline-flex;align-items:center;gap:6px;color:var(--ink)!important;font-weight:600;text-decoration:none}
.org-mail .ic{width:18px;height:18px}