/* =========================================================================
   shared.css · naraflood.com
   สัญญาออกแบบ (design contract) + เลเยอร์คอมโพเนนต์ร่วมของทุกหน้า

   ทิศทาง: "น้ำเชี่ยว" · register แบบ instrument
   คนที่เข้าเว็บนี้ไม่ได้มาให้ขายของ เขามาหาคำตอบว่า "ต้องกังวลไหม ต้องไปไหน"
   หน้าเว็บจึงต้องแน่น ตอบก่อน แล้วค่อยแจกแจง

   วิธีที่ไฟล์นี้ถูกใช้
   ลิงก์ด้วย <link rel="stylesheet" href="shared.css?v=3"> วางไว้ "หลัง" บล็อก
   <style> ของแต่ละหน้า (ก่อน </head>) ลำดับการโหลดคือกลไกทั้งหมด: ทุกหน้า
   ประกาศ :root ของตัวเองไว้ในไฟล์ ไฟล์นี้โหลดทีหลังจึงชนะด้วย source order
   โดยไม่ต้องใช้ !important เลย

   กฎเหล็กสองข้อของระบบสี
   1. --signal (เขียวน้ำทะเล) คือสีของ "ตัวเว็บ" ปุ่ม แท็บ ชิป ลิงก์ ใช้ได้หมด
   2. --st-* (เขียว เหลือง ส้ม แดง) คือสีของ "สถานการณ์" เท่านั้น
      ห้ามเอาไปใช้กับ chrome เด็ดขาด ไม่งั้นพอมีอำเภอเสี่ยงระดับส้มขึ้นมาจริง
      สีมันจะหมดแรงเตือน เพราะตาคนชินกับส้มบนของที่ไม่มีความหมายไปแล้ว
      (ของเดิมใช้ส้ม #fe6e00 เป็นสีแบรนด์บนแถบเมนูและปุ่มรีเฟรช คือปัญหาข้อนี้)

   CACHE: เมื่อแก้ไฟล์นี้ ต้องบัมพ์ ?v= ในแท็ก <link> ของทุกหน้า และใน
   sw.js SHELL_ASSETS กับ sw.js VERSION พร้อมกัน เพราะ service worker
   คีย์แคชด้วย URL เต็มรวม query string
   ========================================================================= */

/* =========================================================================
   1. สัญญาออกแบบ: token
   ห้ามมี hex ดิบหรือ px ดิบในคอมโพเนนต์ ทุกค่าต้องอ้างจากตรงนี้
   ========================================================================= */
:root{
  /* ---------- พื้นผิว: สว่างอมน้ำเงินจาง ไม่มีขาวล้วน ----------
     ไล่ตามแดชบอร์ดอ้างอิง พื้นแอปสว่างเกือบขาวแต่มีสีแบรนด์เจือ
     การ์ดยกขึ้นมาเป็นขาวกว่าพื้น แล้วให้เงานุ่มทำหน้าที่แยกชั้นแทนเส้นขอบหนา */
  /* v9 "สายน้ำ": พื้นเทาฟ้าอมหมอกแบบท้องฟ้าหลังฝน แทนเทาม่วงเดิม
     การ์ดเป็นขาวอมฟ้า ยกด้วยเงานุ่มและ "ขอบสองชั้น" (วงแหวนโปร่งรอบการ์ด) */
  --paper:#eef0f6;        /* พื้นหน้า (v9.5: เทาอมคราม) */
  --paper-2:#e2e6f0;      /* พื้นยุบ ใช้กับแถบเครื่องมือ */
  --card:#fcfcff;         /* การ์ดยกขึ้น ขาวแต่ยังมีอุณหภูมิ */
  --card-2:#f2f4fa;       /* การ์ดซ้อนในการ์ด */
  --glass:rgba(252,252,255,.78);       /* หัวเว็บและแถบล่างแบบกระจกฝ้า */
  --glass-line:rgba(255,255,255,.75);
  --bezel:rgba(16,58,82,.055);         /* วงแหวนนอกของการ์ด (ขอบชั้นนอก) */
  --sky:#dde3f3;                       /* แสงฟ้าจาง ๆ ด้านบนของหน้า */

  /* ---------- เส้น 3 ระดับ เพื่อให้ขอบสื่อลำดับชั้นได้ ไม่ใช่แค่มีขอบ ----------
     ค่าถูกเลือกให้ห่างจากค่าพื้นผิวทุกตัวพอที่จะมองเห็นจริง
     เส้นผมที่สว่างใกล้พื้นภายใน 2 ขั้นความสว่างจะมองไม่เห็นบนจอกลางแดด */
  --line:#dde1ec;
  --line-mid:#bcc3d6;
  --line-strong:#7d86a0;

  /* ---------- หมึก: กรมท่าเกือบดำ ไม่ใช่ดำล้วน ---------- */
  --ink:#171d33;
  --ink-2:#424a66;
  /* วัดจากพิกเซลที่เรนเดอร์จริงแล้วต้องได้อย่างน้อย 4.5:1 บนการ์ด
     ค่าที่อ่อนกว่านี้ (#727a96) วัดได้ 4.18:1 ซึ่งตกเกณฑ์
     ตัวนี้คือสีของ .note และป้ายใต้ตัวเลข ซึ่งเป็นข้อความที่คนอ่านกลางแดดจริง */
  --ink-3:#5f6783;

  /* ---------- signal: สีทำงานของเว็บ น้ำเงินกรมท่าจากตราสัญลักษณ์ ปภ. ----------
     สีมาจากของที่หน่วยงานเป็นเจ้าของอยู่แล้ว ไม่ใช่สีที่เลือกให้ตามใจ
     ทั้งมือและตัวอักษร DDPM บนตราเป็นน้ำเงินกรมท่าบนพื้นเหลือง

     ในแดชบอร์ดอ้างอิง ส้มถูกใช้เป็นสีเมนูที่เลือกอยู่และปุ่มหลัก
     แต่เว็บนี้เป็นเว็บเตือนภัย ส้มมีความหมายว่า "เตือนภัย" อยู่แล้ว
     ถ้าเอาไปแปะบนเมนู ตาคนจะชินกับส้มบนของที่ไม่มีความหมาย
     แล้ววันที่มีอำเภอเสี่ยงระดับส้มจริง สีจะหมดแรงเตือน
     น้ำเงินจึงเป็นสีหลักเดี่ยว และส้มถูกคืนให้ระบบเตือนภัยใช้อย่างเดียว */
  /* v9: สีทำงานเปลี่ยนจากกรมท่าเป็น "น้ำเงินสายน้ำ" อมเขียวหัวเป็ด
     เข้ากับพื้นฟ้าหมอก และยังห่างจากเขียว/เหลือง/ส้ม/แดงของสถานการณ์พอ
     กรมท่าของตรา ปภ. ยังอยู่ ย้ายไปเป็น --ddpm ใช้กับเครื่องหมายบนหัวเว็บ */
  --signal:#2c4fb4;
  --signal-hover:#223f93;
  --signal-deep:#16285e;
  --signal-wash:#e5eafa;
  --signal-ink:#fbfcff;
  --ddpm:#1c3282;

  /* ---------- เหลืองของตรา ปภ. ----------
     กฎเหล็ก: เหลืองสดนี้ใช้ได้เฉพาะเป็นของประดับ chrome และเฉพาะเมื่อวาง
     บนพื้นน้ำเงินเท่านั้น (เส้นคาดใต้หัวเว็บ ขีดบอกแท็บที่เลือก แถบจับของแผ่น)
     ห้ามใช้กับข้อมูล ตัวเลข หรือสถานะเด็ดขาด เพราะเหลืองในระบบนี้
     มีความหมายว่า "เฝ้าระวัง" อยู่แล้ว (--st-watch) ถ้าปนกันเมื่อไร
     ผู้ใช้จะแยกไม่ออกว่าเหลืองตรงหน้าคือยี่ห้อหรือคือคำเตือน
     บนพื้นน้ำเงิน #1c3282 เหลืองนี้วัดได้ราว 8.5:1 จึงอ่านออกชัด */
  --brand-yellow:#ffd400;
  --brand-yellow-dim:#e0ba00;

  /* ---------- ไวยากรณ์สถานการณ์ สงวนไว้ใช้กับระดับภัยเท่านั้น ----------
     base = ตัวหนังสือและไอคอน  wash = พื้นชิป
     ปรับให้สดขึ้นตามภาพอ้างอิง แต่เข้มพอจะเป็นตัวหนังสือบน wash ของตัวเองได้ */
  --st-normal:#15803d;   --st-normal-wash:#dcfce7;
  --st-watch:#a16207;    --st-watch-wash:#fef3c7;
  --st-warn:#c2410c;     --st-warn-wash:#ffedd5;
  --st-danger:#be123c;   --st-danger-wash:#ffe4e6;

  /* ---------- ยกระดับ: เงานุ่มกระจายกว้างแบบภาพอ้างอิง ----------
     การ์ดในภาพแทบไม่มีเส้นขอบ ใช้เงาบาง ๆ ที่ฟุ้งกว้างแยกชั้นแทน
     วงแหวน 1px ยังอยู่เพื่อให้ขอบไม่หายไปเลยบนจอกลางแดด */
  --lift-1:0 1px 2px rgba(28,40,90,.05),0 10px 26px -16px rgba(28,40,90,.28);
  --lift-2:0 2px 4px rgba(28,40,90,.06),0 16px 36px -18px rgba(28,40,90,.36);
  --lift-3:0 24px 60px -18px rgba(28,40,90,.42);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.95);

  /* ---------- รัศมีตามบทบาท ไม่ใช่ตามขนาด ----------
     ถามว่า "นี่คือ control หรือ sheet" ตอบได้ทันที
     ถามว่า "นี่คือ md หรือ lg" ต้องเดา
     มนขึ้นกว่าเดิมตามภาพอ้างอิงที่การ์ดมนราว 16px และปุ่มมนราว 12px */
  --r-control:12px;
  --r-media:18px;
  --r-sheet:24px;
  --r-commit:999px;

  /* ---------- บันได z มีชื่อ ห้าม z-index ดิบในคอมโพเนนต์ ----------
     ค่าสูงกว่า 1000 เพราะ Leaflet บนหน้า map และ route วาดตัวเองถึง ~1000
     แถบล่างต้องลอยเหนือแผนที่เสมอ ไม่งั้นแท็บหายไปทั้งหน้า */
  /* ปุ่มลอยอยู่เหนือแผนที่ แต่ต้องต่ำกว่าแถบล่างและฉากหลังของแผ่นเมนู
     ไม่งั้นเปิดแผ่น "เพิ่มเติม" แล้วปุ่มติดตั้งจะลอยทะลุขึ้นมาทับฉากหลัง */
  --z-fab:1150;
  --z-bar:1200;
  --z-scrim:1250;
  --z-sheet:1300;

  /* ---------- ความสูง chrome เป็น token ----------
     ทุกกล่องที่เลื่อนได้ ทุกของที่ปักหมุด และการคำนวณ safe area
     ต้องอ้างตัวเลขชุดเดียวกัน ไม่งั้นจะมีอยู่หน้าเดียวที่เนื้อหาโดนแถบล่างบัง
     แล้วไม่มีใครหาสาเหตุเจอ */
  --tabbar-h:60px;
  --dock-gap:10px;   /* แถบล่างลอยห่างขอบจอ (มือถือ) */
  /* ปุ่มติดตั้งแอปลอยเหนือแถบล่าง ของมุมล่างซ้ายอื่น (คำอธิบายสีของแผนที่)
     ต้องหลบด้วยตัวเลขเดียวกันนี้ ไม่ใช่ตัวเลขที่กะเอาแยกกันคนละที่ */
  --install-fab-h:44px;

  /* ---------- ระยะ ฐาน 4px ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---------- ตัวอักษร ----------
     IBM Plex Sans Thai พาทั้งไทยและละตินมาด้วยกัน จึงไม่เจอกับดัก
     ที่ Noto Sans Thai ไม่มี glyph ละติน แล้ว "AI" ตกไป fallback จนอ่านเป็น "Al"
     และเป็นหน้าที่ออกแบบมาสำหรับ UI ข้อมูลโดยตรง ไม่ใช่หน้าตกแต่ง */
  --ui:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --lh-thai:1.65;
  --lh-tight:1.25;

  /* ---------- เส้นโค้งเดียวทั้งเว็บ ---------- */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* =======================================================================
     แม็ปชื่อ token เดิมมาที่ระบบใหม่
     ทั้ง 14 หน้าอ้าง --orange รวมกัน 124 ครั้ง และ --navy อีก 99 ครั้ง
     ในบล็อก <style> ของตัวเอง การแม็ปตรงนี้จุดเดียวจึงเปลี่ยนสีทั้งเว็บ
     โดยไม่ต้องแตะ CSS ในหน้าไหนเลย
     --orange เดิมเคยเป็นสีแบรนด์ ตอนนี้ชี้ไปที่ --signal สีเตือนภัยจึงว่างคืนมา
     ======================================================================= */
  --bg:var(--paper);
  --elevated:var(--card);
  --surface:var(--card-2);
  --surface-soft:var(--paper-2);
  --outline:var(--line);
  --outline-strong:var(--line-mid);
  --muted:var(--ink-3);

  --orange:var(--signal);
  --orange-d:var(--signal-hover);
  --orange-focus:var(--signal-hover);
  --orange-warm:var(--st-watch);

  --navy:var(--ink-2);
  --navy-d:var(--ink);
  --peach:var(--paper-2);

  /* หัวเว็บเป็นน้ำเงินกรมท่าของตรา ปภ. คาดด้วยเส้นเหลืองของตราด้านล่าง
     คู่สีน้ำเงินบนเหลืองคือตัวตราเอง และการวางเหลืองไว้บนน้ำเงินทำให้
     เหลืองอยู่ในที่ที่อ่านออกชัดโดยไม่ไปปนกับความหมาย "เฝ้าระวัง" */
  --shell:var(--glass);

  --success:var(--st-normal);
  --warning:var(--st-watch);
  --danger:var(--st-danger);
  --info:var(--signal);

  /* token เดิมอีกชุดที่โผล่เฉพาะบางหน้า หลายหน้าประกาศ :root ซ้ำสองรอบในไฟล์
     เดียวกัน ทำให้ของพวกนี้หลุดสายตาได้ง่าย ถ้าไม่แม็ปด้วยจะเหลือหน้าที่ยัง
     ใช้พาเลตต์เก่าอยู่ปนกับหน้าที่เปลี่ยนแล้ว ซึ่งอ่านว่า "ของหลุดชุด"
     --panel เดิมเป็น #ffffff ขาวล้วน ผิดกฎพื้นต้องมีอุณหภูมิ */
  --panel:var(--card);

  /* สีระดับน้ำและสถานะ ทุกตัวชี้กลับเข้าไวยากรณ์เดียวกัน */
  --c-over:var(--st-danger);     --c-overflow:var(--st-danger);
  --c-risk:var(--st-warn);
  --c-watch:var(--st-watch);     --c-low:var(--st-watch);
  --c-critlow:var(--st-warn);
  --c-ok:var(--st-normal);       --c-normal:var(--st-normal);
  --c-high:var(--signal);        --c-down:var(--signal);
  --c-na:var(--ink-3);           --c-unknown:var(--ink-3);
  --ok:var(--st-normal);
  --warn:var(--st-watch);
  --bad:var(--st-danger);
}

/* =========================================================================
   2. ฐาน
   ========================================================================= */
/* v9: พื้นหน้ามีแสงฟ้าจาง ๆ ไล่จากด้านบน เหมือนท้องฟ้าหลังฝน
   ใช้ fixed attachment เพื่อไม่ให้แสงเลื่อนตามเนื้อหายาว ๆ */
body{
  font-family:var(--ui);
  background:
    radial-gradient(1100px 520px at 50% -260px,var(--sky),transparent 70%),
    var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  /* ตัวเลขต้องตรงคอลัมน์ ระดับน้ำ ปริมาณฝน เวลา เปอร์เซ็นต์ ทั้งเว็บคือตัวเลข
     ตัวเลขที่ไม่ตรงหลักคือข้อบกพร่องที่คนรู้สึกได้แต่เรียกชื่อไม่ถูก */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
:lang(th),body{line-height:var(--lh-thai)}

/* ภาษาไทยมีสระบนและล่าง การบีบ letter-spacing ที่สวยกับตัวพิมพ์ใหญ่ละติน
   ทำให้ไทยพัง ปิดทิ้งทั้งเว็บ */
h1,h2,h3,.card h2,.chip,.navtab a{letter-spacing:0}
h1,h2,h3{line-height:var(--lh-tight)}

a{color:var(--signal)}
a:hover{color:var(--signal-hover)}

/* =========================================================================
   3. Chrome: หัวเว็บ แถบเมนู แถบเลือกพื้นที่
   v9: หัวเว็บเป็น "แคปซูลกระจกฝ้า" ลอยห่างขอบจอ แทนแถบทึบเต็มความกว้าง
   เนื้อหาเลื่อนลอดใต้แล้วเห็นจาง ๆ ผ่านกระจก หน้าจึงดูโปร่ง ไม่หนักหัว
   ========================================================================= */
header{
  top:var(--s2);
  margin:var(--s2) var(--s2) 0;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-line);
  border-radius:var(--r-sheet);
  border-bottom:2px solid var(--brand-yellow);
  box-shadow:var(--lift-1),var(--inset-hi);
  color:var(--ink);
  min-height:56px;
}
/* เครื่องหมายเว็บหน้าชื่อหน้า: สี่เหลี่ยมมนกรมท่าของตรา ปภ. มีคลื่นเหลืองข้างใน
   เป็นที่เดียวที่กรมท่ากับเหลืองของตราปรากฏคู่กัน และเหลืองอยู่บนกรมท่าเสมอ
   จึงไม่มีทางถูกอ่านเป็นสีเตือนภัย "เฝ้าระวัง" */
header>h1::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:11px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7 15.5c2.2-2 4.4-2 6.6 0s4.4 2 6.6 0 4.4-2 6.6 0' fill='none' stroke='%23ffd400' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M7 21.5c2.2-2 4.4-2 6.6 0s4.4 2 6.6 0 4.4-2 6.6 0' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='24.5' cy='9.5' r='2.4' fill='%23ffd400'/%3E%3C/svg%3E") center/100% no-repeat,
    linear-gradient(160deg,#2a4aa8,var(--ddpm));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px -4px rgba(28,50,130,.55);
}
header>h1{position:relative;padding-left:46px;min-height:34px;display:block;padding-top:5px;padding-bottom:3px;
  font-weight:700;letter-spacing:0;color:var(--ink)}
header>h1 small{color:var(--ink-3);font-weight:400}
header>h1:has(small){padding-top:0;padding-bottom:0}
#updated{color:var(--ink-3)}

.navtab{
  background:rgba(16,58,82,.045);
  border:1px solid transparent;
  border-radius:var(--r-commit);
  padding:4px;
}
.navtab a{color:var(--ink-2);border-radius:var(--r-commit);font-weight:500}
.navtab a:hover{color:var(--ink);background:rgba(255,255,255,.85)}
/* แท็บที่เลือกอยู่ยกขึ้นเป็นเม็ดขาวมีเงา เหมือนปุ่มสวิตช์ที่ถูกกด
   ไม่ใช้สีเต็มใบ เพราะบนแถบโปร่ง สีทึบก้อนเดียวจะแย่งสายตาจากเนื้อหา */
.navtab a.on{background:var(--ddpm);color:#fff;font-weight:700;
  box-shadow:inset 0 -3px 0 var(--brand-yellow)}
.navtab a.on:hover{background:var(--ddpm);color:#fff}

#btnRefresh{
  background:var(--signal);color:var(--signal-ink);
  border-radius:var(--r-control);font-weight:600;padding-left:16px;padding-right:16px;
  box-shadow:0 6px 14px -8px rgba(44,79,180,.8);
  transition:background .15s var(--ease),transform .15s var(--ease);
}
#btnRefresh:hover{background:var(--signal-hover);color:var(--signal-ink)}
#btnRefresh:active{transform:scale(.96)}
header #btnHelp{background:var(--card);color:var(--signal);border:1px solid var(--line-mid);border-radius:var(--r-commit)}
header #btnHelp:hover{background:var(--signal-wash)}
header #authBox{color:var(--ink-2)}
header #authBox button{background:var(--signal);border-radius:var(--r-commit)}
header #authBox .pill{background:var(--signal-wash)!important;color:var(--signal)}
/* ปุ่มเข้าสู่ระบบที่ js/auth-ui.js ใส่ให้ เดิมออกแบบไว้บนพื้นมืด (ตัวหนังสือขาว) */
header .auth-btn{border-radius:var(--r-commit);box-shadow:0 0 0 1px var(--line-mid)}
header .auth-chip{background:var(--signal-wash);border-color:transparent;color:var(--signal-deep)}
header .auth-out{color:var(--ink-3)}
header .auth-out:hover{color:var(--signal)}

#selbar{background:transparent;border-bottom:none}
.chip{
  background:var(--card);color:var(--ink);
  border:1px solid var(--line-mid);border-radius:var(--r-control);
  font-weight:500;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);
}
.chip:hover{border-color:var(--signal);color:var(--signal)}
.chip.on{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600;
  box-shadow:0 6px 14px -8px rgba(44,79,180,.7)}
/* ป้ายชื่อจังหวัดเป็นข้อความนิ่ง กดไม่ได้ ไม่ใช่ปุ่ม จึงต้องเงียบ */
.provlbl{
  background:var(--paper-2);color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-commit);
  font-weight:600;
}
#ampSel{border:1px solid var(--line-mid);border-radius:var(--r-control);background:var(--card);color:var(--ink)}

/* =========================================================================
   4. การ์ดและเนื้อหา
   v9: "ขอบสองชั้น" แกนในขาว + วงแหวนโปร่งรอบนอก ทำด้วยเงาล้วน
   จึงไม่ต้องแก้ markup ของหน้าไหน และไม่กินพื้นที่จริงในเลย์เอาต์
   ========================================================================= */
.card{
  background:var(--card);
  border:1px solid var(--glass-line);
  border-radius:var(--r-media);
  border:1px solid var(--line);
  box-shadow:var(--lift-1),var(--inset-hi);
}
.card h2{color:var(--ink);font-weight:700}
.card h2 .where{color:var(--ink-3);font-weight:400}
.note{color:var(--ink-3)}
footer{background:transparent;border-top:1px solid var(--line);color:var(--ink-3)}
footer a{color:var(--signal)}

/* v9: ปุ่มสลับช่วงเวลา (หน้าคาดการณ์) และชิปเรดาร์ ให้เป็นเม็ดยาเหมือนชิปอื่นทั้งเว็บ
   ปุ่มที่ไม่ได้เลือกเดิมเป็นก้อนสีเข้มทึบ ซึ่งหนักกว่าปุ่มที่เลือกอยู่เสียอีก */
.hbtn,.rchip{background:var(--card);color:var(--ink-2);border:1px solid var(--line-mid);border-radius:var(--r-control)}
.hbtn:hover,.rchip:hover{border-color:var(--signal);color:var(--signal)}
.hbtn.on,.rchip.on{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);
  box-shadow:0 6px 14px -8px rgba(44,79,180,.7)}
#ncPlay{border-radius:50%;border:1px solid var(--line-mid);background:var(--card);color:var(--signal)}
#ncSlider{accent-color:var(--signal)}
.btn{border-radius:var(--r-commit)}

/* =========================================================================
   5. ไวยากรณ์สถานการณ์ ใช้กับระดับภัยเท่านั้น
   ทุกหน้าที่แสดงระดับความเสี่ยงต้องใช้ชุดนี้ ไม่ประดิษฐ์สีเอง
   ========================================================================= */
/* ชื่อคลาสคือ .sig ไม่ใช่ .st เพราะ .st ถูกใช้ไปแล้วเป็นแถวสถานีน้ำใน index.html
   และ .lvl ถูกใช้แล้วใน eoc.html การทับชื่อจะพังของเดิมแบบเงียบ ๆ */
.sig{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s1) var(--s3);border-radius:var(--r-commit);
  font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;
}
.sig::before{content:"";width:8px;height:8px;border-radius:var(--r-commit);background:currentColor;flex:none}
.sig-normal{background:var(--st-normal-wash);color:var(--st-normal)}
.sig-watch {background:var(--st-watch-wash); color:var(--st-watch)}
.sig-warn  {background:var(--st-warn-wash);  color:var(--st-warn)}
.sig-danger{background:var(--st-danger-wash);color:var(--st-danger)}

/* =========================================================================
   5b. แถบคำตอบ
   ของที่คนเปิดเว็บนี้มาหา ต้องเห็นโดยไม่ต้องเลื่อนเลย
   ของเดิมกว่าจะถึงตัวเลขนี้ต้องผ่าน chrome 316px แล้วอ่านร้อยแก้วของกรมอุตุฯ
   อีกครึ่งการ์ด ทุกตัวเลขในนี้อ่านมาจากค่าที่หน้านี้คำนวณอยู่แล้ว
   ไม่มีการคิดเลขชุดใหม่ ตัวเลขบนหน้าจึงตรงกันเสมอ
   ========================================================================= */
.strip{
  background:var(--card);
  border:1px solid var(--line);
  border-left:4px solid var(--line-strong);
  border-radius:var(--r-media);
  box-shadow:var(--lift-1);
  padding:var(--s4);
  display:grid;gap:var(--s3);
}
.strip[data-lv="normal"]{border-left-color:var(--st-normal)}
.strip[data-lv="watch"] {border-left-color:var(--st-watch)}
.strip[data-lv="warn"]  {border-left-color:var(--st-warn)}
.strip[data-lv="danger"]{border-left-color:var(--st-danger)}

.strip-lv{font-size:20px;font-weight:600;line-height:var(--lh-tight);color:var(--ink)}
.strip-sub{font-size:13px;color:var(--ink-2);line-height:1.55}
.strip-nums{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);
  border-top:1px solid var(--line);padding-top:var(--s3);
}
.strip-nums>div{display:grid;gap:2px;min-width:0}
.strip-nums b{
  font-size:23px;font-weight:600;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.strip-nums span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.strip-when{font-size:11.5px;color:var(--ink-3)}
@media(min-width:769px){
  .strip{grid-template-columns:1fr auto;align-items:center;gap:var(--s5)}
  .strip-nums{border-top:none;border-left:1px solid var(--line);
    padding-top:0;padding-left:var(--s5);min-width:330px}
  .strip-lv{font-size:23px}
}

/* =========================================================================
   5c. ส่วนที่พับเก็บ
   ภาพเรดาร์และแผนที่แบบจำลองเป็นของอ้างอิง ไม่ใช่คำตอบแรกที่คนต้องการ
   สองใบนี้กินความสูงรวมกัน 931px บนมือถือ คิดเป็นเกินหนึ่งจอเต็ม
   พับไว้แล้วบอกด้วยคำว่าข้างในมีอะไร ดีกว่าบังคับให้ทุกคนเลื่อนผ่าน
   ใช้ details ของ HTML เอง จึงกดด้วยคีย์บอร์ดได้และโปรแกรมอ่านหน้าจอเข้าใจ
   โดยไม่ต้องเขียน JS เพิ่มสักบรรทัด
   ========================================================================= */
.fold{margin-top:var(--s2)}
.fold>summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  min-height:44px;padding:var(--s2) 0;
  font-size:13.5px;font-weight:600;color:var(--signal);
  cursor:pointer;list-style:none;
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.fold[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fold>summary:hover{color:var(--signal-hover)}
.fold-body{padding-top:var(--s2)}

/* ---------- ตัวแปรสำหรับคำอธิบายใต้การ์ด ----------
   คำอธิบายที่มา เกณฑ์ และข้อจำกัดของแต่ละการ์ดยาวการ์ดละ 3-6 บรรทัด
   ซึ่งจำเป็นต้องมี แต่คนที่เปิดมาถามว่า "ต้องอพยพไหม" ไม่ได้อ่านมันทุกครั้ง
   พับไว้ก่อนแล้วเปิดได้ด้วยปุ่มเดียว คำตอบจึงอยู่ใกล้ตาขึ้นโดยไม่ต้องตัดข้อมูล
   ทิ้ง (การลบคำอธิบายที่มาทิ้งบนเว็บเตือนภัยคือการลบสิ่งที่ทำให้เชื่อถือได้)

   ต่างจาก .fold ปกติตรงที่นี่เป็นของรอง ไม่ใช่ทางเข้าไปดูข้อมูลเพิ่ม
   จึงเป็นสีหมึกจาง ตัวเล็กกว่า และมีเส้นคั่นบางบอกว่าจบเนื้อหาหลักแล้ว */
.fold-note{margin-top:var(--s2);border-top:1px solid var(--line)}
.fold.fold-note>summary{
  min-height:40px;font-size:12px;font-weight:500;color:var(--ink-3);
}
.fold.fold-note>summary:hover{color:var(--signal)}
.fold.fold-note>summary::after{width:7px;height:7px}
.fold-note>.note{margin-top:0;padding-bottom:var(--s2)}

/* =========================================================================
   5d. รางเลื่อนแนวนอนของสถานีน้ำหลัก
   สามสถานีเรียงลงมาแนวตั้งกินความสูง 618px บนมือถือ คิดเป็นเกือบหนึ่งจอเต็ม
   ทั้งที่เป็นของชนิดเดียวกันสามชิ้นที่เอามาเทียบกัน ซึ่งเป็นงานของรางแนวนอน
   ห้ามพับเก็บ เพราะเป็นระดับน้ำจริงที่คนใช้ตัดสินใจ ต้องบีบ ไม่ใช่ซ่อน
   ========================================================================= */
@media(max-width:768px){
  .wtaRow{
    flex-wrap:nowrap;justify-content:flex-start;
    gap:var(--s3);padding-bottom:var(--s1);
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;touch-action:pan-x;
    scrollbar-width:none;
    /* ขอบขวาจางลงเพื่อบอกว่ายังมีใบถัดไป ราง 3 ใบที่ความกว้าง 76%
       ล้นเสมอ เงาจึงไม่โกหก ต่อให้เลื่อนไปสุดแล้วก็ยังมีของอยู่ทางซ้าย */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .wtaRow::-webkit-scrollbar{display:none}
  .wtaCol{flex:0 0 76%;max-width:none;scroll-snap-align:center}
}
/* คำบอกท่าทาง ของที่ปัดได้ต้องบอกด้วยคำ ไม่ใช่รอให้ผู้ใช้เดาเอง
   บนจอคอมไม่ต้องบอกเพราะทั้งสามใบเรียงให้เห็นพร้อมกันอยู่แล้ว */
.swipe-hint{display:none}
@media(max-width:768px){
  .swipe-hint{
    display:block;font-size:11.5px;color:var(--ink-3);
    margin-top:var(--s1);
  }
}

/* =========================================================================
   6. แถบแท็บล่าง
   การเปลี่ยนอย่างเดียวที่ทำให้หน้าเว็บรู้สึกเป็นแอปจริง และเป็นคำสัญญาว่า
   ทุกส่วนของระบบกดถึงได้จากทุกที่ในแตะเดียว
   ของเดิมเป็นแถบเมนู 12 อันเลื่อนแนวนอนด้านบนที่โดนตัด และไม่เหมือนกันสักหน้า
   (index 12 อัน, map 9, eoc 8, people 4) ตรงนี้คือ 5 อันเท่ากันทุกหน้า
   ========================================================================= */
/* v9: แถบล่างเป็น "ท่าเรือลอย" กระจกฝ้ามนทั้งใบ ห่างขอบจอ --dock-gap
   แท็บที่เลือกอยู่มีเม็ดสีจางรองใต้ไอคอน + สีน้ำเงิน + ตัวหนา
   สีจึงไม่ใช่สัญญาณเดียว คนตาบอดสียังอ่านออก */
.tabbar{
  position:fixed;z-index:var(--z-bar);
  left:var(--dock-gap);right:var(--dock-gap);
  bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom));
  height:var(--tabbar-h);
  padding:0 4px;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-line);
  border-radius:var(--r-sheet);
  box-shadow:var(--lift-2),var(--inset-hi);
}
.tabbar a,.tabbar button{
  display:grid;place-items:center;gap:1px;
  min-height:48px;padding:var(--s1) 2px;
  font-family:inherit;font-size:11px;font-weight:500;line-height:1.3;
  color:var(--ink-3);text-decoration:none;
  background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block;
  box-sizing:content-box;padding:2px 12px;border-radius:var(--r-commit);
  transition:background .2s var(--ease)}
.tabbar a[aria-current="page"]{color:var(--signal-deep);font-weight:700;position:relative}
.tabbar a[aria-current="page"] svg{background:var(--signal-wash);color:var(--signal)}
.tabbar a:active,.tabbar button:active{transform:scale(.94)}
.tabbar a,.tabbar button{transition:color .15s var(--ease),transform .06s var(--ease)}

/* ทุกหน้าต้องเว้นที่ให้แถบล่าง ไม่งั้นแถวสุดท้ายกดไม่ถึง */
body{padding-bottom:calc(var(--tabbar-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom))}

/* บนมือถือ แถบล่างทำหน้าที่นำทางแทนแล้ว แถบเมนู 12 อันด้านบนจึงเป็นของซ้ำ
   ที่กินพื้นที่เหนือ fold ไปเปล่า ๆ และของเดิมก็โดนตัดขอบขวาอยู่ดี
   ภาพแบนเนอร์เป็นของประดับ ซึ่งเป็นสิทธิ์ของหน้าขายของ ไม่ใช่ของเครื่องมือ
   ที่คนเปิดมาเพื่อหาคำตอบว่าต้องอพยพไหม จอคอมยังเห็นทั้งสองอย่างตามเดิม */
@media(max-width:768px){
  .navtab{display:none}
  .pageBanner{display:none}

  /* หัวเว็บเดิมสูง 99px เพราะชื่อหน้ากับปุ่มรวมกันกว้างเกินจอไป 3px
     แล้วปุ่มเข้าสู่ระบบตกลงไปอยู่บรรทัดของตัวเองทั้งบรรทัด
     ให้ชื่อหน้าหดได้และตัดท้ายแทนที่จะดันของอื่นตก */
  header{gap:var(--s2)}
  header h1{flex:1 1 0;min-width:0;font-size:15.5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* หน้าที่แสดงเวลาอัปเดตด้วย (คาดการณ์ ย้อนหลัง แผนที่) มีของบนหัวเว็บ
     มากกว่าหน้าแรกหนึ่งชิ้น ปุ่มท้ายแถวจึงตกไปครองบรรทัดของตัวเองทั้งบรรทัด
     ให้เวลาอัปเดตลงไปอยู่บรรทัดล่างเต็มความกว้างแทน ปุ่มทุกตัวจะได้อยู่แถวเดียวกัน
     เวลาอัปเดตต้องไม่ถูกซ่อน เพราะบนเว็บเตือนภัย ความสดของข้อมูลคือข้อมูล */
  header #updated{order:9;flex:1 0 100%;margin-left:0;text-align:right}
}
/* v9: จอคอมให้หัวเว็บอยู่บรรทัดเดียวเสมอ แคปซูลสองบรรทัดดูเหมือนของพัง
   แถบเมนูยอมหดและเลื่อนแนวนอนแทน (js/ui.js ใส่ขอบจางบอกว่ายังมีต่อ) */
@media(min-width:769px){
  header{flex-wrap:nowrap}
  header>h1{flex:none;white-space:nowrap}
  header .navtab{flex:0 1 auto;min-width:0;overflow-x:auto}
  /* แถบเมนูต้องอยู่ที่เดิมทุกหน้า ไม่งั้นกดเปลี่ยนหน้าแล้วปุ่มกระโดดไปมา
     เดิมชื่อหน้ายาวไม่เท่ากัน แถบเมนูจึงเริ่มคนละตำแหน่ง และแต่ละหน้าตั้งระยะในปุ่มเองไม่เท่ากัน
     ให้ชื่อหน้ากว้างเท่ากันทุกหน้า (ยาวเกินตัดท้าย) และปุ่มเมนูขนาดเดียวกัน */
  header{column-gap:10px}
  header>h1{width:300px;overflow:hidden;text-overflow:ellipsis}
  header>h1 small{overflow:hidden;text-overflow:ellipsis}
  header .navtab a{font-size:12px;padding:5px 11px}
  header #updated,header #btnRefresh,header #authUi,header #authBox,header #btnHelp{flex:none;white-space:nowrap}
}
/* จอคอมไม่ต้องมีแถบล่าง เมนูบนอ่านได้สบายอยู่แล้ว */
@media(min-width:769px){
  .tabbar{display:none}
  body{padding-bottom:0}
}

/* หน้าแผนที่กับหน้าเส้นทางเต็มจอ Leaflet วางคำอธิบายสัญลักษณ์
   กับแถบมาตราส่วนไว้ชิดขอบล่าง ซึ่งตอนนี้เป็นที่ของแถบแท็บ
   ยกขึ้นมาให้พ้น ไม่งั้นคำอธิบายสีของระดับน้ำจะถูกบังไปครึ่งหนึ่ง */
@media(max-width:768px){
  .leaflet-bottom{margin-bottom:calc(var(--tabbar-h) + var(--dock-gap) + env(safe-area-inset-bottom))}
}
/* คำอธิบายสัญลักษณ์กับแถบเครดิตของ Leaflet อยู่ในมุมล่างเหมือนกัน
   วัดแล้วบรรทัดสุดท้ายของคำอธิบายถูกแถบเครดิตทับอยู่ 10px
   ยกคำอธิบายให้พ้น เพราะบรรทัดที่โดนทับคือคีย์สีของเขื่อนและกล้อง */
.leaflet-bottom .legend{margin-bottom:22px}

/* ---------- แผ่นเมนูเพิ่มเติม ----------
   ปลายทางที่เหลืออยู่ในนี้ แทนที่จะยัด 12 อันลงแถบเดียว
   กฎคือ 3 ถึง 5 อัน ไม่เกินนั้น ถ้าต้องการที่ 6 แปลว่าสองอันควรอยู่ในอันที่สาม */
.sheet-scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(10,36,50,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.sheet-scrim.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;inset:auto var(--dock-gap) var(--dock-gap) var(--dock-gap);z-index:var(--z-sheet);
  background:var(--card);
  border:1px solid var(--glass-line);
  border-radius:var(--r-sheet);
  box-shadow:var(--lift-3);
  padding:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  transform:translateY(calc(100% + 24px));transition:transform .32s var(--ease-out);
  max-height:80vh;overflow-y:auto;
}
.sheet.show{transform:translateY(0)}
.sheet-grab{width:44px;height:4px;border-radius:var(--r-commit);background:var(--line-mid);margin:0 auto var(--s3)}
.sheet h3{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:var(--s2)}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sheet-grid a{
  display:grid;place-items:center;gap:var(--s1);
  padding:var(--s3) var(--s1);min-height:76px;
  border:1px solid var(--line);border-radius:18px;
  background:var(--card-2);color:var(--ink);
  font-size:12px;font-weight:500;line-height:1.35;text-align:center;text-decoration:none;
}
.sheet-grid a[aria-current="page"]{border-color:var(--signal);background:var(--signal-wash);color:var(--signal);font-weight:600}
.sheet-grid svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media(min-width:769px){.sheet,.sheet-scrim{display:none}}

/* =========================================================================
   7. เลเยอร์มือถือและการสัมผัส (ของเดิม เก็บไว้ทั้งหมด)
   ทุกอย่างในหัวข้อนี้ผ่านการตรวจบนเครื่องจริงมาแล้ว จึงไม่แตะ
   ========================================================================= */
a,button,select,input,.chip{touch-action:manipulation;-webkit-tap-highlight-color:rgba(14,110,122,.15)}
.navtab{scrollbar-width:none}
.navtab::-webkit-scrollbar{display:none}
.navtab a:focus-visible,button:focus-visible,.tabbar a:focus-visible{
  outline:2px solid var(--signal);outline-offset:1px
}
@supports(padding:max(0px)){
  header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}

/* ---------- เป้าสัมผัส ----------
   มาตรฐานคือ ~44px กฎเดิมทิ้งแท็บเมนูไว้ที่ ~34px และชิปที่ ~32px
   ใช้กับอุปกรณ์สัมผัสหรือจอแคบ จอคอมกับเมาส์ที่ความกว้างเต็มไม่เข้าเงื่อนไขไหนเลย */
@media(pointer:coarse),(max-width:768px){
  .navtab a{padding:10px 14px;font-size:13.5px;min-height:42px;display:inline-flex;align-items:center}
  .chip,.provlbl{min-height:40px;padding:8px 14px;display:inline-flex;align-items:center}
  select,input:not([type=checkbox]):not([type=radio]){min-height:40px}
  .btn.sm,.pop-btn,.hbtn,.pbtn,.vbtn{min-height:38px;min-width:38px}
  /* Leaflet วาดปุ่มควบคุมของตัวเองที่ขนาดตายตัว ปล่อยไว้
     .install-x (ปุ่มปิดปุ่มติดตั้ง) ก็ยกเว้นด้วย เพราะมันเป็นวงกลมที่คร่อมมุม
     ของปุ่มหลัก ถูกยืดเป็น 36px แล้วจะกลายเป็นวงรี และเป้าที่ใหญ่ขึ้นตรงนั้น
     คือเป้าที่นิ้วกดโดนโดยไม่ได้ตั้งใจ แล้วปุ่มติดตั้งหายไปทั้งปุ่ม
     เป้าหลักที่ต้องได้ 44px คือตัวปุ่มติดตั้งเอง ซึ่งได้อยู่แล้ว */
  button:not(.leaflet-container button):not(.leaflet-control button):not(.tabbar button):not(.install-x){min-height:36px}
  label input[type=checkbox],label input[type=radio]{min-width:20px;min-height:20px}
}

/* ---------- ตัวอักษรบนมือถือ และกันซูมบน iOS ----------
   Safari บน iOS ซูมหน้าเมื่อโฟกัสช่องกรอกที่เล็กกว่า 16px */
@media(max-width:768px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  /* .note คือคำอธิบายสีเทาใต้การ์ดเกือบทุกใบ 10.5px เล็กเกินกว่าจะอ่าน
     มือเดียวกลางแดด ซึ่งคือสถานการณ์ใช้งานจริงของเว็บนี้ */
  .note{font-size:12px;line-height:1.6}
}

/* ---------- ตัวอักษรบนจอคอม ----------
   ของเดิมส่วนใหญ่ 10.5 ถึง 13px เล็กเกินไปสำหรับภาษาไทยที่มีสระบนล่าง
   ค่าที่เลือกไม่ต่ำกว่าค่าเดิมของหน้าไหนเลย จึงไม่มีที่ไหนตัวเล็กลง */
@media(min-width:769px){
  .note{font-size:12.5px;line-height:1.65}
  .muted{font-size:13.5px}
  footer{font-size:12px}
  header h1 small{font-size:12px}
  #updated{font-size:12.5px}

  table{font-size:13.5px}
  th{font-size:13px}

  .navtab a{font-size:13.5px}
  .chip,.provlbl{font-size:14px}
  .btn{font-size:14.5px}
  .btn.sm{font-size:13px}
  #btnRefresh{font-size:14px}

  .card h2{font-size:16px}
  .badge,.pill{font-size:11.5px}
  .legend{font-size:12.5px;line-height:1.75}
  .leaflet-popup-content{font-size:13.5px}

  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:15px}

  .sub,.where,.tel2,.stale{font-size:12.5px}
  .occnum,.mm,.pp,.amm{font-size:12px}
  .item .nm{font-size:14px}
  .card h3{font-size:14.5px}
  .disc,.provcard,.extbtn,.freq-dot,.yr{font-size:12.5px}
  .sw{font-size:11px}
  .src-btn,#btnReport,.ddpm-filters select{font-size:13px}
  .layerrow{font-size:13px}
  .rainScale .rsGrp b{font-size:12px}
  .rainScale .rsGrp small,.rainScale .rsTitle small{font-size:10.5px}
  .provbtn{font-size:11.5px}
  .sumcard span{font-size:10.5px}
  .sumcard b{font-size:18px}
}

/* ---------- สัญญาณว่าแถบเมนูบนเลื่อนได้ (คลาสถูกใส่โดย js/ui.js) ---------- */
.navtab.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.navtab.is-scrollable.at-end{-webkit-mask-image:none;mask-image:none}

/* =========================================================================
   8. ยูทิลิตี้แบบเลือกใช้
   ========================================================================= */
.tblwrap-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tblwrap-scroll table{min-width:560px}

.safe-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom))}

.drawer-scrim{position:absolute;inset:0;background:rgba(16,32,41,.42);z-index:998;display:none}
.drawer-scrim.show{display:block}
@media(min-width:769px){.drawer-scrim{display:none!important}}

.mobile-only{display:none}
@media(max-width:768px){.mobile-only{display:block}}

.mobile-notice{
  background:var(--st-watch-wash);border:1px solid var(--st-watch);
  border-left:4px solid var(--st-watch);
  color:var(--ink);font-size:13px;line-height:1.55;
  padding:10px 12px;margin:8px;border-radius:var(--r-control)
}
.mobile-notice a{color:var(--st-watch);font-weight:700}

/* ---------- เคารพการตั้งค่าลดการเคลื่อนไหว ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================================
   9. ปุ่มติดตั้งแอป ลอยมุมล่างซ้าย (markup ถูกใส่โดย js/install.js)
   กดปุ่มนี้ Android จะติดตั้งเว็บเป็นแอปและวางไอคอนไว้บนหน้าจอโฮมให้เลย
   ปุ่มมีทั้งไอคอนและคำเหมือนแถบล่าง ปุ่มกลมเปล่าไม่บอกใครว่ากดแล้วได้อะไร
   ซึ่งบนของที่ขอ "ติดตั้ง" ยิ่งต้องบอก เพราะคนไม่กดของที่เดาไม่ออก
   ========================================================================= */
.install-dock{
  position:fixed;z-index:var(--z-fab);
  /* ประกาศค่าธรรมดาไว้ก่อนหนึ่งชุด แล้วทับด้วยชุดที่คิด safe area
     เบราว์เซอร์ที่ไม่รู้จัก env()/max() จะทิ้งบรรทัดหลังและยังได้ตำแหน่งที่ถูก
     ถ้าประกาศแต่ชุดหลัง ปุ่มจะไปโผล่กลางหน้าตามตำแหน่ง static */
  left:var(--s3);
  left:max(var(--s3),env(safe-area-inset-left));
  /* เหนือแถบแท็บ ไม่ใช่ทับ — ปุ่มที่คร่อมแถบล่างทำให้กดแท็บซ้ายสุดพลาด */
  bottom:calc(var(--tabbar-h) + var(--s3));
  bottom:calc(var(--tabbar-h) + var(--dock-gap) + env(safe-area-inset-bottom) + var(--s3));
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.install-dock.show{opacity:1;transform:translateY(0);pointer-events:auto}
.install-fab{
  display:inline-flex;align-items:center;gap:var(--s2);
  height:var(--install-fab-h);
  /* ขวาเว้นมากกว่าซ้าย เพราะปุ่มปิดลอยคร่อมมุมขวาบนอยู่
     ถ้าเว้นเท่ากันวงกลมปุ่มปิดจะทับตัวอักษรท้ายคำ */
  padding:0 var(--s5) 0 var(--s3);
  border:none;border-radius:var(--r-commit);
  background:var(--signal);color:var(--signal-ink);
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;
  box-shadow:var(--lift-2);cursor:pointer;
  transition:background .15s var(--ease),transform .06s var(--ease);
}
.install-fab:hover{background:var(--signal-hover)}
.install-fab:active{transform:scale(.96)}
.install-fab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
/* ปุ่มปิด: ของที่ชวนติดตั้งต้องปิดได้ ไม่งั้นมันคือของที่ต้องทนอยู่กับมัน
   วางเยื้องมุมขวาบนของปุ่มหลัก ให้เป้าสัมผัสสองอันไม่ทับกัน */
.install-x{
  position:absolute;top:-8px;right:-8px;
  width:28px;height:28px;min-height:28px;display:grid;place-items:center;
  border:1px solid var(--line-mid);border-radius:var(--r-commit);
  background:var(--card);color:var(--ink-3);
  cursor:pointer;box-shadow:var(--lift-1);padding:0;
}
.install-x:hover{color:var(--ink);border-color:var(--line-strong)}
.install-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;display:block}
/* จอคอมไม่มีแถบล่าง ปุ่มจึงลงไปชิดขอบล่างได้ */
@media(min-width:769px){
  .install-dock{bottom:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
}
/* คำอธิบายสีของ Leaflet อยู่มุมล่างซ้ายเหมือนกัน ตอนปุ่มทับต้องยกให้พ้น
   ไม่งั้นบรรทัดบนของคีย์สีระดับน้ำถูกปุ่มทับ

   คลาส has-install-fab ไม่ได้ใส่ทุกหน้าที่มีแผนที่ js/install.js วัดก่อนว่า
   ปุ่มทับกล่องนั้นจริงไหมแล้วค่อยใส่ เพราะ "มุมล่างซ้ายของแผนที่" ไม่ได้อยู่ที่
   มุมล่างซ้ายของจอทุกหน้า หน้าแผนที่กับเส้นทางแผนที่เต็มจอจึงทับจริง
   แต่หน้าคาดการณ์บนมือถือแผนที่สูง 44vh แล้ววางแผงข้อมูลไว้ใต้มัน คำอธิบายสี
   อยู่กลางหน้าไม่ได้ใกล้ปุ่มเลย ถ้ายกมันขึ้นอีก 126px หัวตารางจะทะลุขอบบน
   ของแผนที่ออกไป (เคยเป็นแบบนั้นจริงในรอบแรกก่อนจะมาวัด) */
body.has-install-fab .leaflet-bottom.leaflet-left{
  margin-bottom:calc(var(--install-fab-h) + var(--s5));
}
@media(max-width:768px){
  body.has-install-fab .leaflet-bottom.leaflet-left{
    margin-bottom:calc(var(--tabbar-h) + var(--dock-gap) + env(safe-area-inset-bottom) + var(--install-fab-h) + var(--s5));
  }
}

/* ---------- แผ่นบอกวิธีติดตั้งด้วยมือ ----------
   ใช้กับเบราว์เซอร์ที่ไม่มี beforeinstallprompt (Safari บน iOS เป็นหลัก)
   คนละตัวกับ .sheet ของแถบแท็บ เพราะ .sheet ถูกซ่อนบนจอคอม
   แต่แผ่นนี้ต้องใช้ได้ทุกความกว้าง เบราว์เซอร์ที่ติดตั้งมือก็มีบนจอคอม */
.install-scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(10,36,50,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.install-scrim.show{opacity:1;pointer-events:auto}
.install-sheet{
  position:fixed;inset:auto 0 0 0;z-index:var(--z-sheet);
  width:min(560px,100%);margin:0 auto;
  background:var(--card);color:var(--ink);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow:var(--lift-3);
  padding:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  transform:translateY(calc(100% + 24px));transition:transform .32s var(--ease-out);
  max-height:85vh;overflow-y:auto;
}
.install-sheet.show{transform:translateY(0)}
.install-sheet h2{font-size:16px;font-weight:700;line-height:var(--lh-tight);margin-bottom:var(--s2)}
.install-lead{font-size:13px;line-height:var(--lh-thai);color:var(--ink-2);margin-bottom:var(--s3)}
/* ขั้นตอนมีเลขกำกับ เพราะลำดับคือเนื้อหา ไม่ใช่การประดับ */
.install-steps{list-style:none;counter-reset:ist;margin:0 0 var(--s3);padding:0}
.install-steps li{
  counter-increment:ist;position:relative;
  padding:0 0 0 var(--s6);margin-bottom:var(--s3);
  font-size:13.5px;line-height:var(--lh-thai);
}
.install-steps li::before{
  content:counter(ist);position:absolute;left:0;top:1px;
  width:24px;height:24px;display:grid;place-items:center;
  border-radius:var(--r-commit);
  background:var(--signal-wash);color:var(--signal);
  font-size:12.5px;font-weight:700;line-height:1;
}
.install-sheet-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.install-btn{
  flex:1 1 auto;min-height:42px;padding:0 var(--s4);
  border:none;border-radius:var(--r-control);
  background:var(--signal);color:var(--signal-ink);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.install-btn:hover{background:var(--signal-hover)}
.install-btn.ghost{background:var(--card-2);color:var(--ink-2);border:1px solid var(--line-mid)}
.install-btn.ghost:hover{background:var(--paper-2);color:var(--ink)}

/* ---------- ป้ายยืนยันหลังติดตั้งเสร็จ ----------
   ตอนติดตั้งเสร็จ Android ไม่บอกอะไรเลยนอกจากไอคอนที่โผล่บนหน้าจอโฮม
   ซึ่งคนที่ยังอยู่บนหน้าเว็บมองไม่เห็น ป้ายนี้คือคำตอบว่า "แล้วมันไปอยู่ไหน" */
.install-toast{
  position:fixed;z-index:var(--z-sheet);
  left:var(--s3);right:var(--s3);bottom:calc(var(--tabbar-h) + var(--s3));
  left:max(var(--s3),env(safe-area-inset-left));
  right:max(var(--s3),env(safe-area-inset-right));
  bottom:calc(var(--tabbar-h) + var(--dock-gap) + env(safe-area-inset-bottom) + var(--s3));
  max-width:420px;
  background:var(--ink);color:var(--signal-ink);
  font-size:13px;font-weight:500;line-height:var(--lh-thai);
  padding:10px var(--s3);border-radius:var(--r-control);
  box-shadow:var(--lift-3);
  opacity:0;transform:translateY(10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.install-toast.show{opacity:1;transform:translateY(0)}
@media(min-width:769px){
  .install-toast{bottom:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
}
/* ปุ่มลอยกับแผ่นบอกวิธีเป็น chrome ของหน้าจอ ไม่ใช่เนื้อหา ไม่ต้องติดไปบนกระดาษ */
@media print{
  .install-dock,.install-sheet,.install-scrim,.install-toast{display:none!important}
}

/* =========================================================================
   10. ฮีโร่หน้าแรก "ตอบก่อน" (v9)
   ประโยคเดียวที่ตอบว่าน้ำตอนนี้เป็นยังไง ตามด้วยตัวเลขที่มาของประโยคนั้น
   แล้วจึงเป็นทางลัดไปส่วนที่ลึกกว่า ภาพแม่น้ำด้านล่างไม่ใช่ของประดับล้วน:
   ระดับน้ำในภาพคือค่ากลาง % ของตลิ่งจากสถานีจริงในพื้นที่ที่เลือก
   ========================================================================= */
.hero{position:relative;padding:var(--s5) 0 0}
.hero-in{max-width:1100px;margin:0 auto;padding:0 var(--s4)}
.hero-live{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:6px 14px 6px 12px;border-radius:var(--r-commit);
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--lift-1),var(--inset-hi);
  font-size:13px;color:var(--ink-2);
}
.hero-live b{color:var(--ink);font-weight:600}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--st-normal);flex:none;position:relative}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--st-normal);
  opacity:0;animation:livePulse 2.2s var(--ease-out) infinite}
.hero-live[data-stale] .live-dot{background:var(--line-strong)}
.hero-live[data-stale] .live-dot::after{display:none}
@keyframes livePulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}

.hero-h{
  margin:var(--s4) 0 var(--s2);
  font-size:30px;line-height:1.3;font-weight:700;color:var(--strong,var(--ink));
  text-wrap:balance;
}
.hero-word{
  color:var(--hw,var(--signal));white-space:nowrap;
  /* v9.5: แถบไฮไลต์สีของระดับใต้ครึ่งล่างของคำ แทนเส้นใต้หยัก */
  background:linear-gradient(transparent 58%,color-mix(in srgb,var(--hw,var(--signal)) 22%,transparent) 58%);
  padding:0 .12em;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero-word[data-lv="normal"]{--hw:var(--st-normal)}
.hero-word[data-lv="watch"] {--hw:var(--st-watch)}
.hero-word[data-lv="warn"]  {--hw:var(--st-warn)}
.hero-word[data-lv="danger"]{--hw:var(--st-danger)}
.hero-word[data-lv="na"]    {--hw:var(--ink-3)}
.hero-sub{font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:62ch;margin:0}
.hero-sub b{color:var(--ink);font-weight:600}

/* ปุ่มหลักหนึ่งปุ่ม ที่เหลือเป็นลิงก์เงียบ ลำดับความสำคัญต้องเห็นได้จากรูปทรง */
.hero-cta{display:flex;align-items:center;gap:var(--s2) var(--s5);flex-wrap:wrap;margin:var(--s5) 0 var(--s4)}
.cta-main{
  display:inline-flex;align-items:center;gap:var(--s4);
  padding:0 18px 0 20px;min-height:48px;border-radius:var(--r-control);
  background:linear-gradient(180deg,#3a5fc6,var(--signal));color:var(--signal-ink);
  font-size:16px;font-weight:700;text-decoration:none;
  box-shadow:0 12px 24px -12px rgba(44,79,180,.85),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.cta-main:hover{color:var(--signal-ink);transform:translateY(-1px)}
.cta-main:active{transform:scale(.97)}
.cta-main i{display:grid;place-items:center;transition:transform .25s var(--ease)}
.cta-main:hover i{transform:translateX(3px)}
.cta-main svg,.cta-link svg,.hchip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cta-link{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--line-mid);border-radius:0;
}
.cta-link:hover{color:var(--signal);border-bottom-color:var(--signal)}

/* แถวทางลัด: ป้ายเล็กหน้าแถว + ชิปเลื่อนแนวนอน บอกที่มาของประโยคบนสุด */
.hero-rows{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.hrow{display:flex;align-items:center;gap:var(--s2);min-width:0}
.hrow-k{flex:none;width:76px;font-size:12.5px;color:var(--ink-3);line-height:1.3}
.hrow-c{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding:3px 2px;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.hrow-c::-webkit-scrollbar{display:none}
.hchip{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px 6px 11px;border-radius:var(--r-control);
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,58,82,.05);
  font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:border-color .15s var(--ease),transform .15s var(--ease);
}
a.hchip:hover{border-color:var(--signal);color:var(--signal)}
a.hchip:active{transform:scale(.97)}
.hchip b{font-weight:700}
.hchip[data-lv="normal"]{color:var(--st-normal);background:var(--st-normal-wash);border-color:transparent}
.hchip[data-lv="watch"] {color:var(--st-watch); background:var(--st-watch-wash); border-color:transparent}
.hchip[data-lv="warn"]  {color:var(--st-warn);  background:var(--st-warn-wash);  border-color:transparent}
.hchip[data-lv="danger"]{color:var(--st-danger);background:var(--st-danger-wash);border-color:transparent}
.hchip.skel{width:150px;height:34px;background:linear-gradient(90deg,var(--card-2),var(--card),var(--card-2));background-size:200% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ---------- ภาพแม่น้ำ ----------
   สีทั้งหมดเป็นตัวแปร ภาพจึงเปลี่ยนเป็นกลางคืนได้ด้วยคลาสเดียว */
.hero-art{
  --sky-1:#eef0f8;--sky-2:#d3dcf2;--orb:#fff4d6;--orb-glow:rgba(255,231,166,.55);
  --far:#c3cde6;--mid:#a9b9d6;--town:#8f9fc2;--town-2:#8394b9;--roof:#c08a6e;--win:#e6ebf7;
  --wall:#9cb98a;--wall-2:#7e9f6e;--coping:#b9cfa4;--tree:#5f8a6a;--mud:#c9b48f;
  --water-1:#4a7fd0;--water-2:#24448f;--wave:#7ea4e0;--crest:rgba(255,255,255,.6);
  --star-op:0;
  position:relative;margin-top:var(--s2);line-height:0;
  border-radius:var(--r-media);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--lift-1);
  background:var(--sky-2);
}
.hero-art.night{
  --sky-1:#203d55;--sky-2:#3a6079;--orb:#f3f1e4;--orb-glow:rgba(243,241,228,.25);
  --far:#355a72;--mid:#2d5068;--town:#25465c;--town-2:#203f53;--roof:#4a4a55;--win:#ffd98a;
  --wall:#2f4d3f;--wall-2:#243e33;--coping:#3c5d4b;--tree:#22413a;--mud:#4a4338;
  --water-1:#24688a;--water-2:#0f3a52;--wave:#33799b;--crest:rgba(255,255,255,.35);
  --star-op:.85;
}
.hero-art svg{display:block;width:100%;height:220px}
.hero-art .w-move{animation:waveX 9s linear infinite}
.hero-art .w-move.slow{animation-duration:15s;animation-direction:reverse}
.hero-art #hWater{transition:transform 1.6s var(--ease-out)}
.hero-art .boat{animation:bob 4.5s ease-in-out infinite;transform-origin:420px 0;transform-box:view-box}
@keyframes waveX{to{transform:translateX(-200px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(3px) rotate(1.2deg)}}
.hero-gauge{
  position:absolute;right:var(--s4);top:16px;
  line-height:1.2;text-align:center;pointer-events:none;
  padding:6px 14px 8px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--lift-1);
}
.hero-gauge b{display:block;font-size:30px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-gauge span{font-size:11.5px;color:var(--ink-2)}
.hero-art.night .hero-gauge{background:rgba(250,252,253,.85)}

@media(max-width:768px){
  .hero{padding-top:var(--s4)}
  .hero-art{margin:var(--s2) calc(-1 * var(--s4)) 0;border-radius:0;box-shadow:none}
  .hero-art svg{height:190px}
  .hero-gauge{top:12px;left:12px;right:auto;padding:4px 12px 6px;border-radius:12px}
  .hero-gauge b{font-size:24px}
  .hero-gauge span{font-size:10.5px}
  .hero-cta{gap:var(--s2) var(--s4)}
  .cta-main{font-size:15px;gap:var(--s3);padding-left:18px}
  .cta-link{font-size:14.5px}
  /* จอแคบ ปุ่มแชร์เหลือแต่ไอคอน สามปุ่มจะได้อยู่แถวเดียว */
  #heroShare span{display:none}
  #heroShare{border-bottom:none;width:40px;justify-content:center}
}
@media(min-width:769px){
  .hero{padding-top:var(--s6)}
  .hero-h{font-size:44px;margin-top:var(--s5)}
  .hero-sub{font-size:17px}
  .hrow-k{width:92px;font-size:13px}
  .hero-art svg{height:260px}
  .hero-gauge{top:24px;right:var(--s5)}
  .hero-gauge b{font-size:36px}
}
@media(prefers-reduced-motion:reduce){
  .hero-art .w-move,.hero-art .boat,.live-dot::after{animation:none}
}

/* ---------- การ์ดแนวโน้มระดับน้ำ (v9.5) ----------
   แถบสัดส่วนหนามีตัวเลขในแถบ ตามด้วยตัวเลขแบบตัวกลาง และสถานีที่เปลี่ยนมากที่สุด */
.dir-bar{display:flex;gap:3px;height:28px;margin:var(--s3) 0 var(--s3)}
.dir-bar i{display:flex;align-items:center;justify-content:center;height:100%;min-width:30px;border-radius:8px;
  font-style:normal;font-size:12.5px;font-weight:700;color:#fff;transition:flex-grow .8s var(--ease-out)}
.dir-bar .r{background:var(--st-warn)}
.dir-bar .f{background:var(--st-normal)}
.dir-bar .s{background:var(--line-mid);color:var(--ink)}
.dir-nums{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.dir-nums>div{display:flex;align-items:baseline;gap:6px}
.dir-nums b{font-size:26px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.dir-nums span{font-size:14px;color:var(--ink-2)}
.dir-rise b{color:var(--st-warn)}
.dir-fall b{color:var(--st-normal)}
.dir-flat b{color:var(--ink)}
.dir-avg{font-size:14px;color:var(--ink-2);margin-top:var(--s2)}
.dir-avg b{color:var(--ink)}
.dir-top{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:4px}
.dir-top:empty{display:none}
.dir-top li{display:flex;align-items:center;gap:var(--s2);font-size:13px;padding:7px var(--s3);border-radius:var(--r-control);background:var(--card-2)}
.dir-top li b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-top li span{flex:none;color:var(--ink-3);font-size:12px}
.dir-top li em{flex:none;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.dir-top li em.up{color:var(--st-warn)} .dir-top li em.dn{color:var(--st-normal)}