/* FUNFOR.YOU community page. Flood severity colours remain distinct from branding. */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
 color-scheme:dark; --ground:#051d19; --surface:#0b3028; --surface-2:#103e32;
 --ink:#fff2d5; --muted:#b7d3c8; --line:#37604c; --water:#7ae9ce; --water-soft:#16463a;
 --deep:#ff9cb7; --high:#ff8f96; --mid:#ffb0a2; --low:#ffd080; --unk:#bed1d6; --ok:#82e0a0;
 --deep-bg:#411c33; --high-bg:#452328; --mid-bg:#492e26; --low-bg:#45351c; --unk-bg:#25423d; --focus:#ffe39a;
}
body { max-width:1500px; margin:auto; background:radial-gradient(ellipse at 0 0,#1d5138,transparent 60%),#051d19; }
.flood-skip { position:fixed; top:5px; left:12px; z-index:3000; background:#ffe49a; color:#08291e; padding:15px; }
.flood-skip:not(:focus) { clip-path:inset(50%); width:1px; height:1px; padding:0; overflow:hidden; white-space:nowrap; }
.flood-brandbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0; }
.flood-brandbar img { display:block; width:160px; height:60px; object-fit:contain; }
.flood-brandbar>span { color:#e6c879; font-size:.72rem; letter-spacing:.16em; }
.flood-brandbar>a:last-child { font-weight:700; font-size:.86rem; }
.bar { position:relative; top:auto; border:1px solid #836d37; border-radius:18px; margin:0; padding:16px 20px; background:#08271fee; }
.bar-actions .btn { min-height:44px; }
.brand h1 { color:#ffe3a0; }.brand h1 span { color:#96eed4; }
.flood-welcome { display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:center; padding:34px 8px; }
.flood-eyebrow { color:#f3cd7d; font-size:.72rem; font-weight:800; letter-spacing:.13em; margin:0 0 10px; }
.flood-welcome h2 { margin:0 0 16px; font-size:clamp(1.85rem,3.6vw,3.5rem); line-height:1.3; letter-spacing:-.035em; }
.flood-welcome h2 em { color:#e9c878; font-style:normal; }
.flood-welcome p { max-width:600px; }
.flood-hero-art { width:100%; height:auto; display:block; border:3px solid #ddbd69; border-radius:28px; box-shadow:0 12px 35px #0005; }
.flood-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0; }
.flood-primary,.flood-secondary,.flood-share-buttons>* { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:750; min-height:46px; padding:11px 18px; border-radius:13px; cursor:pointer; text-decoration:none; }
.flood-primary { color:#082c21; background:linear-gradient(140deg,#ffe7a0,#e8b83f); border:2px solid #fce2a3; box-shadow:0 4px 0 #70531c; }
.flood-secondary,.flood-share-buttons>* { color:#e4f8ed; border:1px solid #52745b; background:#143f32; }
.flood-primary:hover,.flood-secondary:hover,.flood-share-buttons>*:hover { filter:brightness(1.15); border-color:#ffe09a; }
.flood-caution { border-left:3px solid #e9c878; padding-left:12px; font-size:.83rem; color:var(--muted); }
.flood-share { display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; padding:22px; border:1px solid #987d3f; border-radius:20px; background:linear-gradient(125deg,#154734,#08251f); margin-bottom:24px; }
.flood-share h2 { margin:0; font-size:1.2rem; }.flood-share p { margin:4px 0 0; color:var(--muted); font-size:.85rem; }
.flood-share-buttons { display:flex; flex:1; gap:8px; flex-wrap:wrap; }
.flood-share-buttons>* { flex:1 1 auto; font-size:.8rem; padding:10px 12px; white-space:nowrap; }
.flood-share-icon { display:block; width:25px; height:25px; flex:none; transition:transform .2s ease; }
.flood-share-buttons>*:hover .flood-share-icon,.flood-share-buttons>*:focus-visible .flood-share-icon { transform:scale(1.12); }
@media(prefers-reduced-motion:reduce) { .flood-share-icon { transition:none; } }
#share-status { width:100%; }#share-status:empty { display:none; }
#location-status:empty,#report-status:empty { display:none; }
.summary { gap:12px; }.stat { border-radius:16px; border-color:#627048; padding:16px; }.stat b { font-size:1.85rem; }
.flood-map-note { margin:14px 0 4px; color:#c1d6ca; font-size:.8rem; }
.flood-list-hint { margin:0 0 8px; font-size:.8rem; color:#f3d384; }
#cards { max-height:620px; overflow:auto; overscroll-behavior-y:auto; scrollbar-width:thin; scrollbar-color:#d7b965 #0b3028; padding:3px 10px 6px 3px; }
#cards > .card,#cards > .more,#cards > .empty { flex:0 0 auto; }
#cards > .card { min-height:max-content; }
#cards .card-head.no-depth { grid-template-columns:auto minmax(0,1fr); }
#cards .depth-unreported { display:inline-block; margin:6px 0 0 8px; color:var(--muted); font-size:.78rem; line-height:1.4; }
#cards .card-map-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:12px 0 2px 38px; padding:8px 16px; border:1px solid #e6c674; border-radius:10px; background:#164a39; color:#ffe9ac; font:700 .85rem/1.3 var(--body); cursor:pointer; }
#cards .card-map-action:hover,#cards .card-map-action:focus-visible { background:#22664e; outline:2px solid #ffe9ac; outline-offset:2px; }
#cards .report .acts a,#cards .report .acts button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:5px 8px; border:1px solid #557c68; border-radius:8px; color:#d2fff1; font:700 .8rem/1.25 var(--body); text-decoration:none; white-space:normal; }
#cards .report .acts button { background:#164a39; }
@media(max-width:600px) { #cards .card-map-action { margin-left:0; width:100%; } #cards .report { grid-template-columns:1fr; } #cards .report .acts { flex-direction:row; flex-wrap:wrap; align-items:stretch; margin-top:7px; } #cards .report .acts>* { flex:1 1 115px; } }
#cards:focus-visible { outline:2px solid #ffe39a; outline-offset:3px; border-radius:12px; }
#map { scroll-margin-top:14px; }
@media(max-width:900px) { #cards { max-height:460px; } }
.map-col { top:12px; }#map { height:660px; max-height:80vh; }
.flood-map-frame { position:relative; }
.flood-map-guide { box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:8px; padding:9px 12px; border:1px solid #e0bd68; border-radius:13px; background:#082a22; color:#fff3d8; font-size:.76rem; line-height:1.35; }
.flood-map-guide strong { font-size:.92rem; color:#ffe6a1; }
.flood-map-guide>span:first-of-type { flex:1 1 210px; }
.flood-map-guide button { min-height:44px; padding:7px 12px; border:1px solid #ffe5a2; border-radius:10px; background:#145b45; color:white; font:700 .78rem/1.2 var(--body); cursor:pointer; }
.flood-map-guide button:hover,.flood-map-guide button:focus-visible { background:#207b5e; outline:2px solid #ffe5a2; outline-offset:2px; }
.flood-map-guide #map-bangkok { background:#0a382e; }
#map-locate-status:empty { display:none; }
#map-locate-status { flex:1 1 100%; font-size:.72rem; color:#d6f2e4; }
.rain-mode .flood-map-guide { display:none; }
@media(max-width:600px) { .flood-map-guide { padding:9px; }.flood-map-guide strong { flex:1 1 100%; }.flood-map-guide>span:first-of-type { flex:1 1 100%; }.flood-map-guide button { flex:1 1 135px; } }
.views .btn,.chip { min-height:44px; }.btn[aria-pressed="true"],.chip[aria-pressed="true"] { color:#06271b; background:#f6d57f; border-color:#ffe6a0; }
.card { box-shadow:0 5px 16px #0002; }.hotline { color:#f9d887; }
.flood-community { margin-top:36px; border:1px solid #8f793f; border-radius:24px; background:#0b3028; padding:28px; scroll-margin-top:20px; }
.flood-archive { margin-top:36px; border:1px solid #8f793f; border-radius:24px; background:#0b3028; padding:28px; }
.flood-archive h2 { margin:8px 0 12px; color:#ffe3a0; font-size:clamp(1.5rem,2.7vw,2.2rem); }
.flood-archive h3 { margin:24px 0 10px; color:#ffe3a0; }
.flood-archive p { max-width:800px; line-height:1.6; }
.artifact-warning { border-left:4px solid #f1ca77; padding:10px 14px; background:#2d301d; color:#fff3d8; border-radius:0 10px 10px 0; }
#artifact-archive { margin-top:18px; }
#artifact-archive>summary { cursor:pointer; max-width:460px; padding:14px 18px; color:#082c21; background:linear-gradient(140deg,#ffe7a0,#e8b83f); border:2px solid #fce2a3; border-radius:12px; font-weight:750; }
#artifact-archive>summary:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.artifact-road-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-left:24px; }
.artifact-road-list>li { padding:12px; border:1px solid #52745b; border-radius:12px; background:#08261f; overflow-wrap:anywhere; }
.artifact-road-list strong,.artifact-road-list small { display:block; }
.artifact-road-list p { margin:5px 0; font-size:.87rem; }
.artifact-district { color:#c5d9cb; margin-top:3px; }
.artifact-road-list ul { margin:8px 0 0; padding-left:20px; }
.artifact-road-list ul li { margin:7px 0; }
.artifact-road-list code { display:inline-block; margin-right:7px; color:#e9d08d; }
.artifact-depth { color:#ffb0a2; margin-top:3px; }
@media(max-width:700px) { .artifact-road-list { grid-template-columns:1fr; } .flood-archive { padding:18px; } }
.flood-section-heading h2 { font-size:clamp(1.7rem,3vw,2.5rem); margin:8px 0; color:#ffe3a0; }
.flood-section-heading>p:last-child { color:var(--muted); max-width:700px; }
.flood-community-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:36px; margin-top:30px; padding-top:24px; border-top:1px solid #54745a; }
#flood-report-form { display:flex; flex-direction:column; gap:16px; }
#flood-report-form label { display:flex; flex-direction:column; gap:7px; font-weight:650; min-width:0; }
#flood-report-form input:not([type="checkbox"]),#flood-report-form select,#flood-report-form textarea { box-sizing:border-box; width:100%; min-height:46px; background:#061e18; color:#fff2d6; border:1px solid #588667; border-radius:10px; padding:11px; font:inherit; }
#flood-report-form input::placeholder,#flood-report-form textarea::placeholder { color:#a6bfb4; opacity:1; }
.flood-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.flood-privacy { color:var(--muted); font-size:.84rem; margin:0; line-height:1.65; }
#flood-report-form .flood-consent { flex-direction:row; align-items:flex-start; font-size:.88rem; font-weight:400; }.flood-consent input { margin-top:6px; flex:none; }
#flood-report-form .flood-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.flood-report-card { margin:16px 0; padding:18px; border:1px solid #476b53; border-radius:14px; background:#07251e; overflow-wrap:anywhere; }
.flood-report-card h4 { font-size:1.05rem; margin:7px 0; }.flood-report-card p { margin:8px 0; }.flood-report-card time { color:#bad8ce; font-size:.8rem; }
.flood-report-badge { display:inline-block; padding:3px 8px; font-size:.72rem; background:#4a3b1c; color:#ffdd91; border-radius:8px; }
.flood-dialog { width:min(540px,calc(100% - 24px)); max-height:90dvh; overflow:auto; padding:24px; border:2px solid #e1bd61; border-radius:20px; background:#08291f; color:#fff1d3; }
.flood-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.flood-dialog-heading { display:grid; grid-template-columns:1fr auto; align-items:start; gap:12px; }
.flood-dialog h2 { font-size:1.2rem; line-height:1.5; margin:0; overflow-wrap:anywhere; }
#close-share { padding:8px 12px; white-space:nowrap; }
.flood-share-language { display:flex; gap:6px; padding:5px; margin:20px 0; border:1px solid #8f793f; border-radius:14px; background:#061f18; }
.flood-share-language button { flex:1; min-height:44px; padding:8px; border:1px solid transparent; border-radius:9px; background:transparent; color:#e4f8ed; font-weight:600; cursor:pointer; }
.flood-share-language button[aria-pressed="true"] { background:linear-gradient(135deg,#ffe7a0,#e8b83f); color:#082c21; border-color:#ffe6a0; }
.flood-share-language button:hover { box-shadow:inset 0 0 0 1px #ffe6a0; }
#qr-panel { text-align:center; overflow-wrap:anywhere; }#qr-panel img { max-width:100%; height:auto; background:white; border-radius:10px; }
#qr-panel a { display:inline-flex; align-items:center; min-height:44px; }
#story-canvas { width:min(100%,240px); height:auto; display:block; margin:15px auto; }
.flood-story-actions { display:flex; flex-wrap:wrap; gap:10px; }
.flood-story-actions button { flex:1 1 auto; }
#download-story { flex-basis:100%; }
@media(max-width:380px) { .flood-dialog { padding:18px; }.flood-dialog-heading { grid-template-columns:1fr; }#close-share { grid-row:1; justify-self:end; } }
html:lang(th) [data-copy="en"],html:lang(en) [data-copy="th"] { display:none !important; }
button:disabled { opacity:.6; cursor:wait; }html { scroll-behavior:smooth; }#views { scroll-margin-top:14px; }
@media(max-width:800px) { .flood-welcome { gap:22px; }.flood-community-grid { grid-template-columns:1fr; }.flood-brandbar>span { display:none; } }
@media(max-width:600px) { body { padding-inline:12px; }.flood-brandbar img { width:122px; height:50px; }.bar { padding:14px; }.flood-welcome { grid-template-columns:1fr; padding:24px 0; }.flood-hero-art { max-height:235px; object-fit:cover; object-position:center 45%; }.flood-welcome h2 { font-size:2rem; }.flood-share { padding:16px; }.flood-share-buttons>* { flex-basis:calc(50% - 8px); }.flood-community { padding:18px; }.flood-form-row { grid-template-columns:1fr; }.stat { padding:12px; }#map { min-height:320px; height:420px; }.flood-brandbar>a:last-child { font-size:.78rem; }.flood-hero-actions>* { width:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(max-width:380px) { .bar-actions { width:100%; }.bar-actions .stamp { flex-basis:100%; } }