/* IBM Plex Sans Thai (SIL Open Font License, see fonts/OFL.txt), self-hosted so the page
   looks the same offline and makes no third-party requests. Thai + Latin subsets only. */
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-sans-thai-thai-400.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-sans-thai-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/ibm-plex-sans-thai-thai-600.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/ibm-plex-sans-thai-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/ibm-plex-sans-thai-thai-700.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/ibm-plex-sans-thai-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#f3f6f8; --ink:#0f2233; --muted:#51667a; --line:#cfdae3;
  --water:#1d5c8a; --water-soft:#e1edf6; --alert:#b3261e; --alert-soft:#fbe9e7;
  --amber:#8a5a00; --amber-soft:#fff3d6; --panel:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1822; --ink:#e6eef4; --muted:#93a7b8; --line:#23394b;
    --water:#6fb1e0; --water-soft:#12293a; --alert:#ff8a80; --alert-soft:#3a1614;
    --amber:#f5c451; --amber-soft:#33280e; --panel:#122230;
  }
}
:root[data-theme="dark"]{
  --bg:#0c1822; --ink:#e6eef4; --muted:#93a7b8; --line:#23394b;
  --water:#6fb1e0; --water-soft:#12293a; --alert:#ff8a80; --alert-soft:#3a1614;
  --amber:#f5c451; --amber-soft:#33280e; --panel:#122230;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  font-size:17px;line-height:1.6}
.wrap{max-width:680px;margin:0 auto;padding:16px}
/* Links without their own colour use the site blue (the browser default blue is unreadable in dark mode). */
a{color:var(--water)}
header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0 4px}
h1{font-size:1.6rem;line-height:1.25;margin:0}
.updated{color:var(--muted);font-size:.9rem;margin:4px 0 0}
.lang{display:flex;border:2px solid var(--water);border-radius:999px;overflow:hidden;flex-shrink:0}
.lang button{background:none;border:0;padding:6px 14px;font:inherit;font-weight:600;color:var(--water);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--water);color:var(--bg)}
.status{background:var(--alert-soft);border-left:6px solid var(--alert);padding:14px 16px;margin:16px 0;border-radius:4px}
.status strong{color:var(--alert)}
.status p{margin:6px 0 0}
h2{font-size:1.25rem;margin:32px 0 4px}
.sub{color:var(--muted);margin:0 0 12px;font-size:.95rem}
.calls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.call{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:88px}
.call b{font-size:1.5rem;color:var(--water);line-height:1.2}
.call.urgent{border:2px solid var(--alert)}
.call.urgent b{color:var(--alert)}
.call span{font-size:.92rem}
.call:focus-visible,.lang button:focus-visible,select:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);width:100%;margin-bottom:10px}
ul.list{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:10px}
ul.list li{padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
/* Divider above every row except the first visible one (rows are hidden by the district filter). */
ul.list li:not([hidden]) ~ li{border-top:1px solid var(--line)}
.name{font-weight:600}
.meta{color:var(--muted);font-size:.88rem}
.tel{white-space:nowrap;text-decoration:none;font-weight:700;color:var(--water);border:2px solid var(--water);border-radius:999px;padding:4px 12px}
.road{display:block}
.tag{display:inline-block;font-size:.8rem;font-weight:600;padding:1px 8px;border-radius:4px;margin-right:6px}
.tag.avoid{background:var(--alert-soft);color:var(--alert)}
.tag.slow{background:var(--amber-soft);color:var(--amber)}
.tag.no-small-cars{background:var(--alert);color:var(--panel)}
.tips li{margin-bottom:6px}
.src{font-size:.85rem;color:var(--muted)}
.src a{color:var(--water)}
footer{margin:36px 0 20px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
[data-en]{display:none}
html[lang="en"] [data-th]{display:none}
html[lang="en"] [data-en]{display:revert}

/* --- Added in v2: data freshness and fallback notices (existing tokens only) --- */
[hidden]{display:none!important}
.notice{background:var(--amber-soft);border-left:6px solid var(--amber);padding:10px 14px;margin:12px 0 0;border-radius:4px;font-size:.92rem}
.notice strong{color:var(--amber)}
.fresh{color:var(--muted);font-size:.88rem;margin:-10px 0 0}
.stale{background:var(--alert-soft);border-left:6px solid var(--alert);padding:10px 14px;margin:0 0 12px;border-radius:4px}
.stale strong{color:var(--alert)}
.stale a{color:var(--alert);font-weight:700}
.age{white-space:nowrap}
.age-col{text-align:right}
/* Road note: an always-visible caveat above the road list (hidden when empty). */
.note{background:var(--amber-soft);border-left:6px solid var(--amber);padding:10px 14px;margin:0 0 12px;border-radius:4px;font-size:.95rem}
.note:empty{display:none}
/* Without JavaScript the language toggle and district filter can't work, so hide them.
   The inline script in <head> adds class "js" to <html>. */
html:not(.js) .lang,html:not(.js) #district{display:none}
/* Without JavaScript nobody can switch language, so show Thai and English together:
   "โทรขอความช่วยเหลือ / Call for help". Longer paragraphs put the English on its own line. */
html:not(.js) [data-en]{display:revert}
html:not(.js) span[data-th] + span[data-en]::before{content:" / "}
html:not(.js) :is(#status-body,#shelters-note,#roads-note,#assist-pending,footer p:not(.src),.bi-block) > span[data-en]{display:block;margin-top:4px}
html:not(.js) :is(#status-body,#shelters-note,#roads-note,#assist-pending,footer p:not(.src),.bi-block) > span[data-en]::before,
html:not(.js) .call span[data-th] + span[data-en]::before{content:none}
html:not(.js) .age{white-space:normal}
/* "Check live road flooding" button above the road list, and its backup link. */
.live-btn{display:block;text-align:center;text-decoration:none;font-weight:700;background:var(--water);color:var(--bg);
  border-radius:10px;padding:12px 16px;margin:0 0 12px}
.live-alt{display:block;text-align:center;color:var(--water);font-size:.92rem;margin:-4px 0 12px;padding:4px 0}
/* Tools section: link, description, optional note, and whether it's an official source. */
.tool{font-weight:600;color:var(--water)}
.desc{font-size:.95rem}
.tool-note{color:var(--amber);font-size:.88rem;font-weight:600}
.tag.official{background:var(--water-soft);color:var(--water)}
.tag.unofficial{background:var(--bg);color:var(--muted)}
ul.list li > .tag{white-space:nowrap;flex-shrink:0;margin-right:0}
/* Amber banner on the hub pointing to the damage-evidence page (amber = important, red = danger). */
.banner{background:var(--amber-soft);border-left:6px solid var(--amber);padding:10px 14px;margin:12px 0 0;border-radius:4px;font-size:.95rem}
.banner a{color:var(--ink);font-weight:700}
/* ---------- damage.html (evidence checklist) ---------- */
.back{margin:0 0 4px;font-size:.92rem}
.back a{color:var(--water)}
.note.intro{margin:12px 0}
.safety{background:var(--alert-soft);border-left:6px solid var(--alert);padding:10px 14px;margin:12px 0;border-radius:4px;font-size:.9rem}
.actions{margin:12px 0}
.print-btn{font:inherit;font-weight:700;background:var(--panel);color:var(--water);border:2px solid var(--water);border-radius:999px;padding:8px 18px;cursor:pointer}
.clear-btn{font:inherit;font-weight:600;background:var(--panel);color:var(--muted);border:2px solid var(--muted);border-radius:999px;padding:8px 18px;cursor:pointer}
html:not(.js) .print-btn,html:not(.js) .clear-btn{display:none}
/* Numbered steps: a real sequence, so an <ol> whose number is shown in each heading. */
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps>li{counter-increment:step;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px 16px 12px;margin:12px 0}
.steps h2{margin:10px 0 6px}
.steps h2::before{content:counter(step) ". ";color:var(--water)}
.points{margin:0;padding-left:20px}
.points li{margin-bottom:6px}
/* Checklists: real checkboxes, 24px so they're easy to tap; the whole row is the label. */
.checklist{list-style:none;margin:0;padding:0}
.checklist li + li{border-top:1px solid var(--line)}
.checklist label{display:flex;gap:12px;align-items:flex-start;padding:10px 0;cursor:pointer}
.checklist input{width:24px;height:24px;margin:1px 0 0;flex-shrink:0;accent-color:var(--water)}
.checklist.boxed{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 14px}
.small{font-size:.9rem;color:var(--muted)}
table.assist{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);font-size:.95rem}
.assist th,.assist td{text-align:left;vertical-align:top;padding:10px 12px}
.assist tbody tr{border-top:1px solid var(--line)}
.assist thead th{font-size:.85rem;color:var(--muted)}
.assist tbody th{font-weight:400}
.assist td{font-weight:700;width:42%}

/* ---------- Icons and illustrations (icons.svg, img/*.svg; copied into the pages at build time) ----------
   Colour follows meaning: blue = information (section headings), red = danger (status, stale
   roads, safety note), amber = caution / action (notices, road note, damage banner). */
.icon{width:1.2em;height:1.2em;vertical-align:-.22em;margin-right:.35em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1 > .icon,h2 > .icon{color:var(--water)}
.status .icon,.stale .icon,.safety .icon{color:var(--alert)}
.notice .icon,.note .icon,.banner .icon{color:var(--amber)}
.ill-fig{margin:4px 0 10px}
.ill{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;color:var(--ink)}

/* ---------- Print (both pages; "Print / save as PDF" on damage.html) ----------
   Black on white, no banner or buttons, checkboxes as empty boxes to tick by hand,
   source links printed with their addresses. */
@media print{
  :root{--bg:#fff !important;--ink:#000 !important;--muted:#000 !important;--line:#000 !important;
    --water:#000 !important;--water-soft:#fff !important;--alert:#000 !important;--alert-soft:#fff !important;
    --amber:#000 !important;--amber-soft:#fff !important;--panel:#fff !important}
  body{background:#fff;color:#000;font-size:12pt}
  .wrap{max-width:none;padding:0}
  .lang,.print-btn,.clear-btn,.actions,.banner,.back,.notice,.stale,#district,.live-btn,.live-alt{display:none !important}
  a{color:#000}
  .checklist input{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:1.5px solid #000;border-radius:2px;background:#fff;margin-top:4px}
  .steps>li,.checklist li,.assist tr,.note,.safety{break-inside:avoid}
  #assist-source a::after{content:" (" attr(href) ")";word-break:break-all}
  @page{margin:15mm}
}
/* Secondary hotlines ("group": "other"), below the main emergency numbers. */
.calls-other-h{font-size:1.05rem;margin:24px 0 8px}
/* Donation points: several phone numbers per place, wrapping onto new lines on narrow screens. */
.phones{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
/* Hide empty containers (e.g. no roads listed right now): no empty list box, no blank line. */
ul.list:empty,.sub:empty{display:none}
/* "Before going back home" on damage.html: a red box (the .safety style) holding a heading and a list. */
.before-home h2{font-size:1rem;margin:2px 0 6px;color:var(--alert)}
.before-home .points{padding-left:18px}
.before-home .points li{margin-bottom:6px}
.before-home a{color:var(--alert);font-weight:700}