/*
 * RRU-GDRS หน้าบ้าน — dashboard หน้าเดียวโทนสว่าง (ค่าเริ่มต้น) สลับมืดได้
 * token ชุดเดียวกันทั้งหน้าบ้าน/หลังบ้าน: ห้าม hardcode สีในไฟล์อื่น ให้อ้างตัวแปรเหล่านี้
 */
:root {
  --bg: #EDF1F4; --surface: #FFFFFF; --surface-2: #F4F7F9; --surface-3: #E4EAEF;
  --ink: #0F2230; --ink-2: #47596A; --ink-3: #768795;
  --line: #DCE3E9; --line-2: #C5D0D9;
  --accent: #0A6C9E; --accent-ink: #FFFFFF; --accent-soft: #DCEDF7;
  --ok: #2B784C; --ok-bg: #E0F1E6; --warn: #A36100; --warn-bg: #FCF0DB; --crit: #BD3829; --crit-bg: #FBE4DF; --crit-ink: #FFFFFF;
  --water: #2A8BC0; --water-fill: rgba(42, 139, 192, .16);
  --forecast: #6E4FB0;   /* พื้นอำเภอ = พยากรณ์ฝน (แยกจากฟ้าของฝนวัดจริง) */
  --wx-sun: #E39A12; --wx-cloud: #B3C0C9; --wx-cloud-dk: #8394A0; --wx-rain: #2A8BC0; --wx-bolt: #E8A600;
  --shadow: 0 1px 2px rgba(15, 34, 48, .05), 0 6px 20px -8px rgba(15, 34, 48, .10);
  --map-filter: none;
  --r: 16px;
  --body: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --display: "Anuphan", "IBM Plex Sans Thai", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #08121A; --surface: #0F1C26; --surface-2: #0C1821; --surface-3: #172A38;
  --ink: #E4EDF3; --ink-2: #A3B4C0; --ink-3: #6E8391;
  --line: #1C2E3C; --line-2: #2A4050;
  --accent: #5DB6E6; --accent-ink: #06121A; --accent-soft: #11314A;
  --ok: #6CC893; --ok-bg: #10301E; --warn: #E8A84E; --warn-bg: #33240D; --crit: #F27E6A; --crit-bg: #3A1713; --crit-ink: #1A0806;
  --water: #58B1DF; --water-fill: rgba(88, 177, 223, .18);
  --forecast: #A98AE6;
  --wx-sun: #F2B84B; --wx-cloud: #7E919E; --wx-cloud-dk: #5E717E; --wx-rain: #58B1DF; --wx-bolt: #F5C84A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --map-filter: invert(.92) hue-rotate(180deg) brightness(.85) contrast(.9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 999; padding: 8px 12px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); }
.skip:focus { top: 10px; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 2200px; margin: 0 auto; padding: 0 clamp(14px, 2vw, 32px); }
/* minmax(0, 1fr): คอลัมน์หดตามจอได้ — ถ้าปล่อยเป็น auto จะกว้างตามข้อความ nowrap ที่ยาวที่สุด ทำให้ทั้งหน้าล้นจอบนมือถือ/iPad */
main.wrap { padding: 14px clamp(14px, 2vw, 32px) 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* ===== Header ===== */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.brand-logo { width: auto; height: 44px; flex: 0 0 auto; display: block; }
.brand .eyebrow { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand h1 { margin: 0; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.ver { font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.hdr-r { display: flex; align-items: center; gap: 8px; }
.fresh { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.fresh b { color: var(--ink); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); flex: 0 0 auto; }
.dot.stale { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); }
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); }

/* ===== Sticky nav ===== */
.nav { position: sticky; top: 0; z-index: 800; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
/* จำนวนจังหวัดที่แสดงเพิ่มบนแผนที่ (ป้าย “แผนที่ +N”) */
.mapprov-n { padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1.6 var(--body); }
/* ลิสต์กางลง: 📍 .provpick (แถบด้านบน) = เปลี่ยนหน้า · .mappick (ชิปแรกในการ์ดแผนที่สถานการณ์) = ติ๊กจังหวัดที่แสดงบนแผนที่ (ใช้ .pp-pop ชุดเดียวกัน) */
.provnav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.provpick, .mappick { position: relative; }
.mappick summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.mappick summary::-webkit-details-marker { display: none; }
/* อยู่เหนือแผนที่ด้านล่าง (ปุ่มควบคุม Leaflet ใช้ z-index 1000) */
.mappick[open] { z-index: 1100; }
.mappick .pp-pop { z-index: 1100; }
.mappick summary:hover, .mappick[open] summary { color: var(--ink); }
.mappick[open] summary svg { transform: rotate(180deg); }
.provpick summary { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.provpick summary::-webkit-details-marker { display: none; }
.provpick summary > svg:first-child { color: var(--accent); flex: none; }
.provpick .pp-name { overflow: hidden; text-overflow: ellipsis; }
.provpick[open] summary > svg:last-child { transform: rotate(180deg); }
.provpick .alertdot, .pp-list .alertdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--crit); flex: none; }
.pp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 900; width: 290px; max-height: min(70vh, 520px); display: flex; flex-direction: column; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 34px -10px rgba(15, 34, 48, .35); overflow: hidden; }
.pp-search { margin: 10px 10px 4px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; }
.pp-head { display: flex; justify-content: space-between; padding: 8px 14px 4px; font-size: 11.5px; color: var(--ink-3); }
.pp-list { list-style: none; margin: 0; padding: 0 6px 6px; overflow-y: auto; }
.pp-list li { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.pp-list li:hover { background: var(--surface-2); }
.pp-list li[hidden] { display: none; }
.pp-list a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.pp-list a.on { font-weight: 700; color: var(--accent); }
.pp-list a.on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pp-list label { flex: 1; display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 8px; font-size: 14px; cursor: pointer; }
.pp-list label span { flex: 1; }
.pp-list label small { font-size: 11px; color: var(--ink-3); }
.pp-list input { width: 17px; height: 17px; accent-color: var(--accent); }
.pp-none { padding: 12px 8px; font-size: 13px; color: var(--ink-3); }
.pp-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.pp-foot button { border: 0; background: none; padding: 4px 6px; color: var(--accent); font: 600 12.5px var(--body); cursor: pointer; }
@media (max-width: 640px) {
  .provpick summary { max-width: 150px; }
  /* ลิสต์กว้างเต็มจอ กางลงใต้แถบเมนู (.nav มี backdrop-filter → position: fixed ข้างในจะอิงแถบเมนู จึงอิง .nav ด้วย absolute แทน) */
  .provpick { position: static; }
  .mappick .pp-pop { width: min(290px, calc(100vw - 48px)); }
  .pp-pop { top: 100%; left: 8px; right: 8px; width: auto; max-height: 70vh; }
  .pp-list a, .pp-list label { min-height: 46px; }
}
.links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.links::-webkit-scrollbar { display: none; }
.links a { padding: 5px 9px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.links a:hover { color: var(--ink); background: var(--surface-3); }
.links a.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.hotline { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--crit); color: var(--crit-ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.hotline:hover { filter: brightness(1.08); }

/* ===== Alert bar ===== */
.abar { display: grid; gap: 4px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.abar.crit { border-color: color-mix(in srgb, var(--crit) 45%, transparent); background: var(--crit-bg); }
.abar .a-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; }
.abar .a-body { font-size: 14px; font-weight: 600; }
.abar .a-body small { font-weight: 400; color: var(--ink-3); margin-left: 6px; }

/* ===== Pills ===== */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.p-ok { background: var(--ok-bg); color: var(--ok); }
.pill.p-warn { background: var(--warn-bg); color: var(--warn); }
.pill.p-crit { background: var(--crit-bg); color: var(--crit); }
.pill.p-info { background: var(--accent-soft); color: var(--accent); }
.pill.plain::before { display: none; }
.new { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: var(--crit); color: var(--crit-ink); vertical-align: 1px; }

/* ===== Dashboard Header & Action Bar ===== */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.dash-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.dash-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--ok);
}
.dash-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: heroPulse 1.8s ease-in-out infinite;
}
@keyframes heroPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.dash-prov-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--ink);
}
.dash-time-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
}
.dash-title {
  margin: 0;
  font: 700 clamp(18px, 1.8vw, 22px)/1.25 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  min-height: 38px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.dash-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--surface-3);
}
.dash-btn.dash-btn-crit {
  background: linear-gradient(135deg, #DE3E2C, #BA3324);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(189, 56, 41, .28);
}
.dash-btn.dash-btn-crit:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(189, 56, 41, .38);
}
.dash-btn.dash-btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.dash-btn.dash-btn-accent:hover {
  filter: brightness(1.08);
}

/* ===== Summary tiles (Dashboard Multi-Metric Grid: สูงเท่ากันเป๊ะ ไม่แหว่ง) ===== */
.tiles {
  display: grid;
  /* แถวละ 4 ใบเสมอบนจอใหญ่ (8 ใบ = 2 แถวพอดี) — จอ ≤980px เป็น 2, ≤420px เป็น 1 (ดูส่วน Responsive) */
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
/* แถวสุดท้ายไม่เต็ม (จำนวนการ์ดต่างกันตามข้อมูลของจังหวัด) → การ์ดท้ายขยายให้เต็มแถว ไม่เหลือช่องว่าง */
@media (min-width: 981px) {
  .tiles[data-fill="1"] > .tile:last-child,
  .tiles[data-fill="2"] > .tile:nth-last-child(-n+2) { grid-column: span 2; }
  .tiles[data-fill="row"] > .tile:last-child { grid-column: 1 / -1; }
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 15px 14px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  height: 100%;
  min-height: 186px;
  box-sizing: border-box;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.tile.s-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.tile.s-crit { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
/* แดชบอร์ดศูนย์พักพิง (ก่อนแดชบอร์ดน้ำท่วม) */
.shelter-dash { display: grid; gap: 12px; margin-bottom: 28px; scroll-margin-top: 90px; }
.shelter-dash .dash-header h2.dash-title { margin: 2px 0 0; }
.shelter-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* สลับแบบเต็ม/แบบย่อ (ใช้ซ้ำได้: .view-toggle) */
.view-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-3); }
.view-toggle button { border: 0; padding: 5px 12px; border-radius: 999px; background: none; color: var(--ink-2); font: 600 12.5px var(--body); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
/* ศูนย์พักพิงแบบย่อ: ตัวเลขสำคัญแถวเดียว สีตามการ์ดแบบเต็ม (--sc) */
.shelter-min { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.shelter-dash.is-min .tiles { display: none; }
.shelter-dash.is-min .shelter-min { display: grid; }
.sm-item { display: grid; gap: 2px; padding: 12px 16px; border-left: 4px solid var(--sc); border-right: 1px solid var(--line); }
.sm-item:last-child { border-right: 0; }
.sm-item span { font-size: 12.5px; color: var(--ink-2); }
.sm-item b { font: 700 22px/1.2 var(--mono); color: var(--sc); }
.sm-item b i { font-style: normal; }
.sm-item small { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 720px) { .shelter-min { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-item:nth-child(2) { border-right: 0; } .sm-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
/* สีแถบศูนย์พักพิง: หัวแถบโทนเขียวอมฟ้า (shelter) · การ์ดละสี (--sc) = แถบบน + พื้นจาง + กราฟ + ป้าย */
.shelter-dash { --shelter: #0E8174; --sh-flow: #2B784C; --sh-out: #BD3829; --sh-stay: #B86E00; --sh-sex: #B04F87; }
:root[data-theme="dark"] .shelter-dash { --shelter: #4FC7B5; --sh-flow: #6CC893; --sh-out: #F27E6A; --sh-stay: #EBAA4F; --sh-sex: #E58BBE; }
.shelter-dash .dash-header {
  background: linear-gradient(100deg, color-mix(in srgb, var(--shelter) 16%, var(--surface)), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--shelter) 35%, var(--line));
  border-left: 5px solid var(--shelter);
}
.shelter-dash .dash-prov-tag { color: var(--shelter); }
.shelter-dash .btn.pri { background: var(--shelter); border-color: var(--shelter); color: #fff; }
:root[data-theme="dark"] .shelter-dash .btn.pri { color: #06121A; }
.shelter-dash .sh-occ { --sc: var(--shelter); } .shelter-dash .sh-flow { --sc: var(--sh-flow); }
.shelter-dash .sh-stay { --sc: var(--sh-stay); } .shelter-dash .sh-sex { --sc: var(--sh-sex); }
.shelter-dash .tile.s-info {
  border-color: color-mix(in srgb, var(--sc) 35%, var(--line));
  border-top: 4px solid var(--sc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 9%, var(--surface)), var(--surface) 60%);
}
.shelter-dash .tile.s-info:hover { border-color: var(--sc); }
.shelter-dash .tile .pill.p-info { background: color-mix(in srgb, var(--sc) 15%, var(--surface)); color: var(--sc); }
.shelter-dash .tile .t-val { color: var(--sc); }
.shelter-dash .tile .t-bars rect:not(.z) { fill: var(--sc); }
.shelter-dash .sh-in { color: var(--sh-flow); } .shelter-dash .sh-out { color: var(--sh-out); }
.shelter-dash .sh-stay .shelter-list b { color: var(--sh-stay); }
@media (max-width: 640px) { .shelter-actions { justify-content: space-between; } }
.t-val-sub { margin-left: 10px; font-size: .62em; color: var(--ink-2); }
.shelter-list { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; }
.shelter-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.shelter-list li:last-child { border-bottom: 0; }
.shelter-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelter-list b { font: 700 18px/1 var(--mono); color: var(--ink); }
.shelter-list small { color: var(--ink-3); font-size: 11.5px; }
.sex-stack .f { background: #C2659A; } .sex-stack .m { background: var(--accent); } .sex-stack .u { background: var(--ink-3); }
.sx { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 2px; }
.sx.f { background: #C2659A; } .sx.m { background: var(--accent); } .sx.u { background: var(--ink-3); }
.tile.s-info { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tile.s-ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.t-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 22px;
  flex-shrink: 0;
}
.t-lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-val {
  margin: 6px 0 2px;
  font: 700 25px/1.1 var(--mono);
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.t-val small { font: 500 12.5px var(--body); color: var(--ink-2); letter-spacing: 0; }
.s-warn .t-val { color: var(--warn); } .s-crit .t-val { color: var(--crit); } .s-ok .t-val { color: var(--ok); }
.t-sub,
.t-sub2 {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
}
.t-sub b { color: var(--ink); font-weight: 600; }
.t-sub2 { margin-top: 1px; color: var(--ink-3); font-size: 11.5px; }
.t-src { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* บรรทัดที่มาใต้หัวข้อแต่ละส่วน */
.src-line { margin: -12px 0 14px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.subh + .src-line { margin: -4px 0 10px; }
.src-line a { color: var(--accent); text-decoration: none; }
.src-line a:hover { text-decoration: underline; }
.src-api { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); opacity: .85; }
/* แถวกราฟเล็กในการ์ด: สูงเท่ากันทุกใบ (แท่ง/เส้น/หลอด/จุด) */
.t-bars, .t-line { display: block; width: 100%; height: 24px; margin-top: 4px; }
.t-bars rect { fill: var(--water); }
.t-bars rect.z { fill: var(--line-2); }
.t-line polyline { fill: none; stroke: var(--water); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.t-meter, .t-stack { height: 8px; margin: 12px 0 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.t-meter i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.t-meter.m-warn i { background: var(--warn); } .t-meter.m-crit i { background: var(--crit); } .t-meter.m-info i { background: var(--accent); }
.t-stack i { display: block; height: 100%; }
.t-stack .c { background: var(--crit); } .t-stack .w { background: var(--warn); } .t-stack .o { background: var(--ok); }
.t-dots { display: flex; gap: 4px; align-items: center; height: 24px; margin-top: 4px; }
.t-dots i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ok) 35%, var(--surface-3)); }
.t-dots i.on { background: var(--ok); }

/* ===== Dashboard Category Header (จัดกลุ่มเนื้อหาชัดเจน โปร่งสบาย) ===== */
.dash-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
  margin-bottom: 8px;
  padding-top: 10px;
}
.dash-group-header:first-of-type {
  margin-top: 16px;
  padding-top: 0;
}
.dash-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 16.5px/1.3 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
}
.dash-group-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.dash-group-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* ===== Dashboard Content Grid (1 บรรทัดมีหลาย Card เสมอกันเป๊ะ มีระยะห่างกำลังดี) ===== */
.dash-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 28px;
  align-items: stretch;
}
.dash-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
/* บล็อกข้อมูลย่อยภายในการ์ด ให้มีเส้นแบ่งบางๆ และระยะห่างที่สบายตา */
.dash-sub-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.dash-sub-block:first-child,
.dash-sub-block.no-border {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.dash-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-card-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  justify-content: space-between;
}
.dash-card-stack > .dash-card {
  flex: 1;
}
.dash-col-full,
.dash-card-full {
  grid-column: 1 / -1;
}
/* การ์ดพยากรณ์รายภาคของกรมอุตุฯ วางซ้อนกันในคอลัมน์ — เว้นระยะระหว่างการ์ด */
.tmd-forecast-region { display: grid; gap: 12px; align-content: start; }
.tmd-forecast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .tmd-forecast-grid {
    grid-template-columns: 1fr;
  }
}

/* คุมความสูงและ scroll ขององค์ประกอบใน Card ให้สม่ำเสมอ ไม่แหว่ง */
.dash-card .roadgrid,
.dash-card .radargrid {
  align-items: start;
}
/* การ์ดระดับน้ำ ThaiWater (ครึ่งแถว คู่กับการ์ดแม่น้ำ): หลอดเหนือ→ใต้ด้านบน ตารางโทรมาตรด้านล่าง
   ย่อหลอดให้ 6 สถานียังอยู่แถวเดียวในครึ่งการ์ด · ตารางเลื่อนแนวนอนในกล่องเมื่อแคบกว่า 600px */
.tw-split .tubes.chain { grid-auto-columns: minmax(88px, 1fr); gap: 12px; }
.tw-split .tubes.chain .tube + .tube::before { left: -6px; }
.tw-split table.tw { min-width: 600px; }
.dash-card .tblwrap {
  max-height: 380px;
  overflow-y: auto;
}
.dash-card .feed {
  max-height: 440px;
  overflow-y: auto;
}
.dash-card .tmd-radar-viewport {
  height: 440px;
}
.dash-card .cctv-map-wrapper {
  width: 100%;
}
.dash-card .cctvmap {
  width: 100%;
  height: 480px;
}
.dash-card .cctv-list-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-card .cctvlist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* ความสูงแถวตามเนื้อหาเสมอ — ไม่อย่างนั้น Firefox บีบแถวของกลุ่ม (li overflow:hidden) ให้เตี้ยกว่าเนื้อหาเมื่อรายการยาวเกิน max-height */
  grid-auto-rows: max-content;
  gap: 10px;
  align-content: start;
}
.dash-card .cctvlist li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: all .16s ease;
}
.dash-card .cctvlist li:hover,
.dash-card .cctvlist li.on {
  background: var(--surface-3);
  border-color: var(--accent);
}
.dash-card .radarinfo {
  max-height: 440px;
  overflow-y: auto;
}
.dash-card .mapbox#roadMap {
  height: 440px;
}
.dash-card .roadlist#roadList {
  max-height: 440px;
  overflow-y: auto;
}
/* การ์ดรวม ถนนน้ำท่วม + กล้อง CCTV: แผนที่ซ้าย รายการขวา ทั้งสองส่วน (ความสูงคุมที่ --route-h) */
.routes-card { --route-h: 640px; }
.routes-card #roads,
.routes-card #cctv { scroll-margin-top: 90px; }
.routes-card .cctvgrid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; }
.routes-card .mapbox#roadMap,
.routes-card .cctvmap { height: var(--route-h); }
.routes-card .roadlist#roadList,
.routes-card .cctvlist { max-height: calc(var(--route-h) + 34px); }
.routes-card .cctvlist { grid-template-columns: 1fr; }
/* รายการกล้องจัดกลุ่มตามวงกลมบนแผนที่ */
.dash-card .cctvlist li.cctv-grp { padding: 0; background: transparent; border: 1px solid var(--line); cursor: default; overflow: clip; }
.dash-card .cctvlist li.cctv-grp:hover { background: transparent; border-color: var(--line); }
.cctv-grp-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: var(--surface-2); color: var(--ink); font: 600 14px/1.35 var(--body); text-align: left; cursor: pointer; }
.cctv-grp-h:hover { background: var(--surface-3); }
.cctv-grp-h .n { flex: none; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font: 700 12px/1 var(--mono); }
.cctv-grp-h .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-grp-h .chev { flex: none; color: var(--ink-3); transition: transform .15s ease; }
.cctv-grp.open .cctv-grp-h .chev { transform: rotate(180deg); }
.cctv-grp-items { display: none; list-style: none; margin: 0; padding: 8px; gap: 8px; border-top: 1px solid var(--line); }
.cctv-grp.open .cctv-grp-items { display: grid; }
.routes-card .cctv-list-container { margin-top: 0; padding-top: 0; border-top: 0; }
/* ปุ่มย่อ/ขยายแถบรายการด้านขวา — มีผลเฉพาะตอนแผนที่กับรายการอยู่ข้างกัน (≥1081px) */
.routes-card .map-col { position: relative; min-width: 0; }
.side-toggle { display: none; }
@media (min-width: 1081px) {
  .side-toggle {
    position: absolute; z-index: 800; right: 1px; top: calc(var(--route-h) / 2); transform: translateY(-50%);
    display: grid; place-items: center; width: 26px; height: 56px; padding: 0;
    border: 1px solid var(--line-2); border-right: 0; border-radius: 10px 0 0 10px; background: var(--surface); color: var(--ink-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14); cursor: pointer;
  }
  .side-toggle:hover { color: var(--ink); background: var(--surface-2); }
  .side-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .side-toggle svg { transition: transform .15s ease; }
  .side-collapsed .side-toggle svg { transform: rotate(180deg); }
  .routes-card .roadgrid.side-collapsed,
  .routes-card .cctvgrid.side-collapsed { grid-template-columns: minmax(0, 1fr); }
  .side-collapsed > .side-list { display: none; }
}
/* การ์ดนี้เต็มความกว้างแล้ว — ไม่ต้องยุบแผนที่/รายการถนนเป็นคอลัมน์เดียวที่ 1081–1440px */
@media (min-width: 1081px) {
  .routes-card .roadgrid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .routes-card { --route-h: 480px; }
  .routes-card .cctvgrid { grid-template-columns: 1fr; }
  .routes-card .roadlist#roadList,
  .routes-card .cctvlist { max-height: 440px; }
}
@media (max-width: 680px) {
  .routes-card { --route-h: 400px; }
  .routes-card .roadlist#roadList,
  .routes-card .cctvlist { max-height: 380px; }
}

@media (min-width: 1700px) {
  .dash-main-grid { gap: 24px; }
}

@media (max-width: 1080px) {
  .dash-main-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1081px) and (max-width: 1440px) {
  .dash-card .roadgrid,
  .dash-card .radargrid {
    grid-template-columns: 1fr;
  }
  .dash-card .roadlist {
    max-height: 280px;
  }
  .dash-card .cctvmap {
    height: 420px;
  }
  .dash-card .cctvlist {
    max-height: 360px;
  }
}

@media (max-width: 680px) {
  .dash-card .cctvlist {
    grid-template-columns: 1fr;
  }
  .dash-card .cctvmap {
    height: 360px;
  }
}

/* ===== Panels ===== */
.panel { padding: 22px 24px 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.panel-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-h .kick { display: block; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.panel-h h2 { margin: 2px 0 0; font: 600 18.5px/1.3 var(--display); letter-spacing: -.015em; }
.panel-h .meta { font-size: 12px; color: var(--ink-3); }
.subh { margin: 0 0 14px; font: 700 15px/1.35 var(--display); color: var(--ink); letter-spacing: -.01em; }
.note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.note a { color: var(--accent); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.empty { padding: 22px; text-align: center; color: var(--ink-3); font-size: 13.5px; border: 1px dashed var(--line-2); border-radius: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.btn:hover { border-color: var(--accent); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.pri:hover { filter: brightness(1.08); }
.btn.crit { background: var(--crit); border-color: var(--crit); color: var(--crit-ink); }
.more { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Rain ===== */
.now { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.now > div { padding: 10px 14px; border-left: 1px solid var(--line); min-width: 0; }
.now > div:first-child { border-left: 0; }
.now .lbl { font-size: 12px; color: var(--ink-3); }
.now .v { display: flex; align-items: baseline; gap: 6px; font: 700 22px/1.3 var(--mono); }
.now .v small { font: 500 12px var(--body); color: var(--ink-2); }
.now .v svg { width: 26px; height: 26px; align-self: center; }
.now .s { font-size: 12px; color: var(--ink-2); }
.now .s.warn { color: var(--crit); }
.chartbox { position: relative; margin-top: 12px; }
.chartbox svg { display: block; width: 100%; height: auto; overflow: visible; }
.chartbox .grid line { stroke: var(--line); }
.chartbox text { fill: var(--ink-3); font: 10.5px var(--mono); }
.chartbox .daysep { stroke: var(--line-2); stroke-dasharray: 3 3; }
.chartbox .bar { fill: var(--water); }
.chartbox .bar.hot { fill: var(--crit); }
.chartbox .hit { fill: transparent; }
.chartbox .hit:hover { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 6px 9px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12px; white-space: nowrap; transform: translate(-50%, -110%); opacity: 0; transition: opacity .1s; }
.tip.on { opacity: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; background: var(--water); display: inline-block; }
.sw.grad { width: 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--water) 10%, var(--surface-3)), var(--water)); }
.sw.line { height: 2px; width: 16px; }
.sw.dash { height: 0; width: 16px; border-top: 2px dashed var(--crit); background: none; }

.tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
table.tw { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
table.tw th { padding: 9px 10px; text-align: right; font-weight: 500; font-size: 11.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
table.tw th:first-child, table.tw td:first-child { text-align: left; }
table.tw td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
table.tw tr:last-child td { border-bottom: 0; }
table.tw td:first-child { font-family: var(--body); font-size: 13px; white-space: normal; }
table.tw td .sub { display: block; font-size: 11.5px; color: var(--ink-3); font-family: var(--body); }
table.tw td.hm { background: color-mix(in srgb, var(--water) calc(var(--i, 0) * 55%), transparent); }
table.tw td.hi { color: var(--warn); font-weight: 700; }
table.tw tbody tr:hover td { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ฝนวัดจริงรายสถานี */
.rainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rainlist li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) 52px; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.rainlist li[hidden], .rainlist[hidden] { display: none; }
.rainlist.rain-dry { margin-top: 6px; }
.rainlist.rain-dry li { color: var(--ink-3); }
.rainlist.rain-dry b { color: var(--ink-3); font-weight: 500; }
.rainlist .rn small { display: block; font-size: 11.5px; color: var(--ink-3); }
.rainlist .rb { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rainlist .rb i { display: block; height: 100%; border-radius: inherit; background: var(--water); min-width: 2px; }
.rainlist .rb i.warn { background: var(--warn); } .rainlist .rb i.crit { background: var(--crit); }
.rainlist b { text-align: right; }

/* ===== Roads / live reports ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.chip b { color: var(--ink); font-family: var(--mono); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.roadgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; }
.mapbox { position: relative; height: 500px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); }
.mapbox .basemap { filter: var(--map-filter); }
.maphint { position: absolute; left: 50%; top: 10px; z-index: 500; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 80%, transparent); color: var(--bg); font-size: 12px; pointer-events: none; white-space: nowrap; }
.mapbox.map-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.maplegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.maplegend [hidden] { display: none; }   /* รายการของชั้นข้อมูลที่ปิดอยู่ (ff.js) */
.maplegend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
/* แท็บรายการสถานการณ์ข้างแผนที่ */
.sitlist { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sit-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sit-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.sit-tabs button b { font-family: var(--mono); color: var(--ink); }
.sit-tabs button:hover { background: var(--surface-3); color: var(--ink); }
.sit-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.sit-tabs button[aria-selected="true"] b { color: inherit; }
.sit-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .sit-tabs button { min-height: 44px; } }
.sit-panel[hidden] { display: none; }
/* ความสูงรายการ = ความสูงแผนที่ − แถบแท็บ (ให้ปลายรายการตรงกับแผนที่+คำอธิบาย) */
.routes-card .sitlist .roadlist, .routes-card .sitlist .roadlist#roadList { max-height: calc(var(--route-h) - 8px); }
.roadlist { list-style: none; margin: 0; padding: 0; max-height: 500px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.roadlist li { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.roadlist li:last-child { border-bottom: 0; }
.roadlist li:hover, .roadlist li.on { background: var(--surface-2); }
.roadlist .r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.roadlist .r2 { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.roadlist .r2 a { color: var(--accent); }
.ok-ic { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); display: inline-grid; place-items: center; color: var(--surface); font-size: 10px; }
.rrep-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.rrep-h h3 { margin: 0; font: 600 15px var(--display); }
.tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tabs button { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; color: var(--ink-2); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.tabs button .c { font-family: var(--mono); opacity: .7; margin-left: 3px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .when { font: 500 11.5px/1.35 var(--mono); color: var(--ink-3); }
.feed .when b { display: block; font: 600 11.5px var(--body); color: var(--ink-2); }
.feed .txt { font-size: 13.5px; line-height: 1.5; }
.feed .txt a { color: var(--ink); text-decoration: none; }
.feed .txt a:hover { color: var(--accent); text-decoration: underline; }
.feed .src { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.feed li[hidden] { display: none; }
.search { width: 100%; margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; }
.search::placeholder { color: var(--ink-3); }

/* ===== TMD Weather Radar ===== */
.radargrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.radar-controls-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.radar-station-tabs, .radar-mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radar-tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
}
.radar-tab-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-2); }
.radar-tab-btn.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600;
}
.radar-tab-btn .badge-pill {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.radar-tab-btn.active .badge-pill {
  background: color-mix(in srgb, var(--bg) 25%, transparent);
  color: inherit;
}
.tmd-radar-viewport {
  position: relative;
  background: #0b1120;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
}
.tmd-radar-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #e2e8f0; font-size: 13px;
  flex-wrap: wrap;
}
.tmd-radar-station-title {
  display: flex; align-items: center; gap: 8px; font-weight: 600;
}
.tmd-live-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: #10b981; letter-spacing: .03em;
}
.tmd-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 2s infinite ease-in-out;
}
.tmd-radar-actions {
  display: flex; align-items: center; gap: 6px;
}
.tmd-radar-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #f1f5f9; font-size: 12px;
  cursor: pointer; text-decoration: none;
  transition: all .15s ease;
}
.tmd-radar-action-btn:hover {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .3);
}
.tmd-radar-display-area {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #090e17;
  overflow: hidden;
}
.tmd-radar-img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  display: block;
  transition: opacity .2s ease;
}
.tmd-radar-iframe {
  width: 100%;
  height: 560px;
  border: 0;
  display: block;
  background: #ffffff;
}
.tmd-radar-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(11, 17, 32, .8);
  color: #94a3b8; font-size: 13px; gap: 8px;
  z-index: 10;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tmd-radar-loading.hidden { display: none; }
.radar-tab-btn:disabled { opacity: .45; cursor: not-allowed; }
.radar-tab-btn:disabled:hover { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.tmd-radar-action-btn[hidden] { display: none; }
/* RainViewer: แผนที่เต็มกว้างในกรอบเดิม สูงเท่าพื้นที่แสดงภาพ (440px) + แถบเล่น/เลื่อนเวลา */
.rv-radar { width: 100%; align-self: stretch; display: flex; flex-direction: column; }
.rv-radar[hidden] { display: none; }
.rv-radar .rv-radar-map { height: 440px; border: 0; border-radius: 0; }
.rv-radar-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, .88);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #e2e8f0; font-size: 12.5px;
}
.rv-radar-play {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1);
  color: #f1f5f9; cursor: pointer;
}
.rv-radar-play:hover { background: rgba(255, 255, 255, .2); }
.rv-radar-bar input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.rv-radar-time { flex: none; min-width: 92px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
  .rv-radar .rv-radar-map { height: 340px; }
}
.tmd-radar-loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255, 255, 255, .15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.radarinfo { font-size: 13px; color: var(--ink-2); }
.radarinfo p { margin: 0 0 12px; line-height: 1.55; }
.tmd-scale {
  display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none;
}
.tmd-scale li {
  display: grid; grid-template-columns: 24px minmax(70px, 90px) 1fr;
  align-items: center; gap: 8px; font-size: 12.5px;
  padding: 5px 8px; border-radius: 6px;
  background: var(--surface-2);
}
.tmd-scale i {
  width: 20px; height: 12px; border-radius: 3px; display: inline-block;
}
.tmd-scale .dbz {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.tmd-scale .desc {
  color: var(--ink-3); font-size: 12px;
}
.tmd-links-card {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2);
}
.tmd-links-card h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.tmd-links-card ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
}
.tmd-links-card a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--accent); text-decoration: none;
}
.tmd-links-card a:hover {
  text-decoration: underline;
}

/* ===== CCTV map ===== */
.cctvgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 16px; align-items: start; }
.cctvmap { height: 520px; }
.cctv-note { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.cctvlist { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.cctvlist li { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cctvlist li:last-child { border-bottom: 0; }
.cctvlist li:hover, .cctvlist li.on { background: var(--surface-2); }
.cctvlist .r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.cctvlist .r2 { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.cctvlist .r2 a { color: var(--accent); white-space: nowrap; }

/* ===== Announcements / shelters ===== */
.cb { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: 8px; }
.cb .cb-m { font-size: 12px; color: var(--warn); font-weight: 600; }
.cb.crit .cb-m { color: var(--crit); }
.cb.info .cb-m { color: var(--accent); }
.cb h4 { margin: 3px 0 0; font-size: 14px; }
.cb details { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.cb summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
.cb details p { margin: 6px 0 0; white-space: pre-line; }
.shelters { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 10px; }
.shelter { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.shelter h4 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.shelter .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cap { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 8px 0 4px; }
.cap i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.cap i.warn { background: var(--warn); } .cap i.crit { background: var(--crit); }
.shelter .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.shelter .row a { color: var(--accent); }

/* ===== River chart ===== */
/* กราฟแม่น้ำ (อัตราการไหลในการ์ดแม่น้ำ + ระดับน้ำย้อนหลัง 7 วัน #criver ในการ์ดระดับน้ำ) */
.river svg .area, #criver svg .area { fill: var(--water-fill); }
.river svg .ln, #criver svg .ln { fill: none; stroke: var(--water); stroke-width: 2; }
.river svg .bank, #criver svg .bank { stroke: var(--crit); stroke-width: 1.5; stroke-dasharray: 5 4; }
.river svg .nowl, #criver svg .nowl { stroke: var(--ink-3); stroke-dasharray: 2 3; }

/* ===== ThaiWater tubes ===== */
.tubes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
/* ลำน้ำสายหลัก เหนือ → ใต้: บรรทัดเดียวเสมอ จอแคบเลื่อนแนวนอนในกล่องตัวเอง (ไม่ทำให้ทั้งหน้าเลื่อน) */
.tubes.chain { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(108px, 1fr); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scroll-snap-type: x proximity; }
.tubes.chain .tube { position: relative; scroll-snap-align: start; }
.tubes.chain .tube + .tube::before { content: "→"; position: absolute; left: -8px; top: 50%; transform: translate(-50%, -50%); color: var(--ink-3); font-size: 13px; font-weight: 700; pointer-events: none; }
.tube { padding: 10px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-align: center; font-size: 11.5px; color: var(--ink-2); }
.tube.crit { background: var(--crit-bg); border-color: color-mix(in srgb, var(--crit) 50%, var(--line)); }
.tube h4 { margin: 0; min-height: 34px; font-size: 12.5px; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }   /* ชื่อยาวไม่เกิน 2 บรรทัด (ชื่อเต็มอยู่ใน title) */
.tube .code { font: 10.5px/1.35 var(--mono); color: var(--ink-3); min-height: 2.7em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }   /* สูง 2 บรรทัดเสมอ — หลอดทุกอันเริ่มระดับเดียวกัน */
.tube .glass { position: relative; width: 30px; height: 64px; margin: 8px auto 6px; border-radius: 6px 6px 8px 8px; border: 1.5px solid var(--line-2); overflow: hidden; background: var(--surface); }
.tube .glass i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--water); }
.tube.crit .glass i { background: var(--crit); }
.tube .glass::after { content: ""; position: absolute; left: -2px; right: -2px; top: calc(100% - var(--bank, 90%)); border-top: 1.5px dashed var(--ink-2); }
.tube .pct { font: 700 16px var(--mono); color: var(--ink); white-space: nowrap; }
.tube .pct small { font-size: 11px; font-weight: 600; }
.tube.crit .pct { color: var(--crit); }
.tube .chg { font-family: var(--mono); }
.up { color: var(--crit); } .down { color: var(--ok); }
.capbar { display: flex; align-items: center; gap: 8px; }
.capbar .cap { flex: 1; margin: 0; min-width: 60px; }

/* ===== 7-day ===== */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { padding: 10px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-align: center; font-size: 12px; color: var(--ink-2); }
.day.today { border-color: var(--accent); background: var(--accent-soft); }
.day .dn { font-weight: 700; color: var(--ink); font-size: 13px; }
.day.today .dn { color: var(--accent); }
.day svg { width: 34px; height: 34px; margin: 4px auto; display: block; }
.day .mm { font: 700 13px var(--mono); color: var(--ink); margin-top: 2px; }
.day .pbar { height: 4px; border-radius: 999px; background: var(--surface-3); margin: 6px 4px; overflow: hidden; }
.day .pbar i { display: block; height: 100%; background: var(--water); }
.day .t { font: 11px var(--mono); color: var(--ink-3); }

/* ===== Contacts / CTA ===== */
.hot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hot a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--ink); }
.hot a:hover { border-color: var(--crit); }
.hot b { display: block; font: 700 22px var(--mono); }
.hot span { font-size: 12px; color: var(--ink-3); }
.links-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; }
.cta p { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; }
.cta .btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Footer ===== */
.foot { padding-top: 18px; padding-bottom: 30px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.foot b { color: var(--ink); font-family: var(--display); font-size: 14px; }
.foot p { margin: 4px 0; }
.foot .foot-visits b { font-family: var(--mono); font-size: 12.5px; }
.foot a { color: var(--ink-2); }

/* ===== Leaflet ===== */
.leaflet-container { font-family: var(--body); background: var(--surface-3); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content h4 { margin: 0 0 4px; font-size: 14px; }
.leaflet-popup-content p { margin: 3px 0; }
.leaflet-popup-content img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; margin: 4px 0; }
.leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--ink-3); font-size: 10px; }
.leaflet-control-attribution a { color: var(--ink-2); }
.pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); background: var(--water); }
.pin.crit { background: var(--crit); } .pin.warn { background: var(--warn); } .pin.ok { background: var(--ok); }
.pin.sq { border-radius: 3px; }
/* ป้ายสถานีระดับน้ำบนแผนที่สถานการณ์ */
.pin-st { display: inline-grid; place-items: center; min-width: 40px; height: 22px; padding: 0 6px; border-radius: 999px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 3px 8px rgba(0, 0, 0, .18); background: var(--ok); color: #fff; font: 700 11px/1 var(--mono, ui-monospace, monospace); white-space: nowrap; }
.pin-st.warn { background: var(--warn); } .pin-st.crit { background: var(--crit); }
/* ไอคอนในป้าย/หมุดแผนที่ (map_icon) */
.pin-st, .pin-dam, .pin-now { gap: 3px; }
.pin-c { display: flex; align-items: center; justify-content: center; }   /* ป้ายหมุดอยู่กึ่งกลางจุดพอดี ไม่ว่าข้อความยาวเท่าไร */
.pin-st { display: inline-flex; align-items: center; justify-content: center; }
.pin-st .mi, .pin-dam .mi, .pin-now .mi { flex: none; display: block; }
/* หมุดถนน: หยดน้ำกลับหัว สีตามระดับ + ไอคอน */
.pin-road { position: relative; display: block; width: 30px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.pin-road .pr-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-road .pr-bg path { fill: var(--ok); stroke: var(--surface); stroke-width: 2; }
.pin-road.warn .pr-bg path { fill: var(--warn); } .pin-road.crit .pr-bg path { fill: var(--crit); }
.pin-road.near .pr-bg path { stroke: var(--ink); stroke-dasharray: 3 2; stroke-width: 1.6; }
.pin-road.near { opacity: .85; }
.pin-dam.near { border-style: dashed; border-color: var(--ink); }
.pill.p-near { background: var(--surface-3); color: var(--ink-2); border: 1px dashed var(--line-2); font-weight: 500; }
.pin-road .mi { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); color: #fff; }
.maplegend .pin-road.lg-road { display: inline-block; vertical-align: -6px; margin-right: 5px; width: 17px; height: 22px; filter: none; }
.maplegend .pin-road.lg-road .mi { top: 4px; width: 10px; height: 10px; }
.maplegend .lg-sq { border-radius: 2px !important; }
.pin-dam { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 52px; height: 24px; padding: 0 7px; border-radius: 6px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 3px 8px rgba(0, 0, 0, .18); background: var(--ok); color: #fff; font: 700 11px/1 var(--mono, ui-monospace, monospace); white-space: nowrap; }
.pin-dam .dam-ic { flex: none; display: block; }
.pin-dam.warn { background: var(--warn); } .pin-dam.crit { background: var(--crit); }
/* ป้ายเตือนเหนือหมุดเขื่อน: ล้นทางระบาย (แดง) · น้ำเข้า > ระบาย ตอนอ่างเกือบเต็ม (ส้ม) */
.pin-dam { position: relative; }
.dam-flag { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; border: 1.5px solid var(--surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); font: 700 10.5px/1.3 var(--body); font-style: normal; color: #fff; white-space: nowrap; pointer-events: none; }
.dam-flag.crit { background: var(--crit); color: var(--crit-ink); } .dam-flag.warn { background: var(--warn); }
.maplegend .pin-dam.lg-dam { margin-right: 5px; min-width: 22px; height: 18px; padding: 0 4px; box-shadow: none; border-width: 1px; }
.maplegend .pin-dam.lg-dam .dam-ic { width: 12px; height: 12px; }
/* ฝนกำลังตก (ชม.ล่าสุด) — ป้ายหยดน้ำมีวงกระเพื่อม */
.pin-now { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 44px; height: 22px; padding: 0 7px; border-radius: 999px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 3px 8px rgba(0, 0, 0, .18); background: var(--water); color: #fff; font: 700 11px/1 var(--mono, ui-monospace, monospace); white-space: nowrap; }
.pin-now::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--water); opacity: 0; animation: rainPulse 2s ease-out infinite; pointer-events: none; }
@keyframes rainPulse { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .pin-now::after { animation: none; } }
.maplegend .pin-now.lg-now { margin-right: 5px; min-width: 20px; height: 16px; padding: 0 4px; box-shadow: none; border-width: 1px; }
.maplegend .pin-now.lg-now::after { display: none; }
.rain-now { color: var(--water); font-weight: 700; }
/* พายุ: วงกลมสีตามระดับเตือนภัย GDACS + ไอคอนพายุหมุน */
.pin-storm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px rgba(0, 0, 0, .22); background: var(--accent); color: #fff; }
.pin-storm.orange { background: var(--warn); } .pin-storm.red { background: var(--crit); }
.maplegend .pin-storm.lg-storm { display: inline-grid; margin-right: 5px; width: 18px; height: 18px; border-width: 1px; box-shadow: none; vertical-align: -4px; }
.maplegend .pin-storm.lg-storm svg { width: 12px; height: 12px; }
.pin-st.up { border-style: dashed; border-color: var(--ink); }
.maplegend .lg-rain { background: var(--water); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }
.maplegend .lg-zone { background: linear-gradient(90deg, color-mix(in srgb, var(--forecast) 15%, transparent), color-mix(in srgb, var(--forecast) 55%, transparent)); width: 18px; }
.maplegend .pin-st.lg-st { margin-right: 5px; min-width: 24px; height: 16px; padding: 0 4px; font-size: 9px; box-shadow: none; border-width: 1px; }
.leaflet-control-layers { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line) !important; border-radius: 10px !important; }
/* แถบจับสำหรับลากย้ายกล่องชั้นข้อมูล */
.ctl-head { display: flex; align-items: center; gap: 4px; margin: -2px -4px 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.ctl-drag { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: grab; user-select: none; touch-action: none; }
.ctl-min { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 700 16px/1 var(--mono, monospace); cursor: pointer; }
.ctl-min:hover { background: var(--surface-2); color: var(--ink); }
.ctl-min:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* ย่อแล้วเหลือแค่หัวกล่อง */
.ctl-minimized .ctl-head { margin-bottom: -2px; padding-bottom: 0; border-bottom: 0; }
.ctl-minimized .leaflet-control-layers-base,
.ctl-minimized .leaflet-control-layers-separator,
.ctl-minimized .leaflet-control-layers-overlays { display: none; }
.ctl-drag span { font-size: 14px; line-height: 1; }
.ctl-drag:hover { background: var(--surface-2); color: var(--ink-2); }
.ctl-drag.dragging { cursor: grabbing; }
.ctl-drag:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .ctl-drag { min-height: 40px; } .ctl-min { width: 40px; height: 40px; } }
/* แผนที่เต็มจอ: Fullscreen API และแบบสำรองด้วย CSS (iPhone) */
.mapbox:fullscreen { width: 100%; height: 100% !important; border: 0; border-radius: 0; }
.mapbox.map-pseudo-fs { position: fixed !important; inset: 0; z-index: 3000; width: 100vw; height: 100dvh !important; border: 0; border-radius: 0; }
.leaflet-control.ctl-floating { position: absolute; z-index: 1000; margin: 0; float: none; clear: none; }
.leaflet-control-layers label { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.pin.rep { width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; background: var(--surface); border-color: var(--warn); border-width: 2px; }
.pin.shel { border-radius: 5px; background: var(--ok); }
.pin.cctv { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.pin.cctv svg { width: 15px; height: 15px; }
/* กลุ่มกล้อง CCTV บนแผนที่ (Leaflet.markercluster) */
.cctv-cluster { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); cursor: pointer; }
.cctv-cluster span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12.5px/1 var(--mono); border: 2px solid var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cctv-cluster.lg span { width: 32px; height: 32px; font-size: 13px; }
.cctv-cluster:hover span { transform: scale(1.08); }
.cctv-pop { width: min(78vw, 420px); display: grid; gap: 7px; }
.cctv-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cctv-pop-head h4 { margin: 0; }
.cctv-pop > b { display: block; line-height: 1.35; }
.cctv-video-wrap { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #000; aspect-ratio: 16 / 9; }
.cctv-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* ต้องชนะกฎ .leaflet-popup-content img (max-height 140px สำหรับรูปรายงานเหตุ) ให้ภาพสดเต็มกรอบ 16:9 */
.leaflet-popup-content img.cctv-mjpeg,
.cctv-mjpeg { display: block; width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; object-fit: cover; background: #000; }
.cctv-video-state { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 7px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 11.5px; line-height: 1.25; pointer-events: none; }
.cctv-video-state.is-err { background: color-mix(in srgb, var(--crit) 85%, #000); color: #fff; }
/* ไม่มีสัญญาณภาพสด: ข้อความกลางจอดำ หัวข้อ + บรรทัดรอง (data-sub) — ไม่ใช้ class .err เพราะชนกับกฎสีข้อความ error ของฟอร์ม */
.cctv-video-state.is-off { inset: 0; left: 0; bottom: 0; max-width: none; display: grid; place-content: center; gap: 6px; padding: 16px; border-radius: 0; background: #000; color: #fff; text-align: center; font-size: 15px; font-weight: 600; }
.cctv-video-state.is-off::before { content: ""; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--crit); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crit) 30%, transparent); }
.cctv-video-state.is-off::after { content: attr(data-sub); font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.cctv-video-state[hidden] { display: none; }   /* display:grid ของ .is-off จะชนะ [hidden] ถ้าไม่บังคับ */
/* กล้องแม่น้ำ: กรอบเล็ก (กว้างไม่เกิน 420px) ไม่ดันกราฟด้านล่างลงมาก — จอแคบใช้เต็มกว้าง */
.river-cam { max-width: 420px; margin: 0 auto 16px; }
@media (max-width: 680px) { .river-cam { max-width: none; } }
.river-cam-play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
}
.river-cam-play .ic { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--accent); color: #fff; }
.river-cam-play small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .75); }
.river-cam-play:hover .ic, .river-cam-play:focus-visible .ic { transform: scale(1.06); }
.river-cam-play[hidden] { display: none; }
/* หน้าต่างดูกล้องบนมือถือ — กลางจอที่กำลังดู (fixed + 100dvh) ไม่เด้งไปบนสุดของหน้า */
.cam-sheet-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 16px; background: rgba(0, 0, 0, .62); }
.cam-sheet { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.cam-sheet .cctv-pop { width: 100%; }
.cam-sheet .cctv-pop-head { padding-right: 48px; }
.cam-sheet-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; }
.cam-sheet-close:hover { background: var(--surface-2); color: var(--ink); }
.cam-sheet-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.hint-phone { display: none; }
@media (max-width: 680px) { .hint-wide { display: none; } .hint-phone { display: inline; } }
.cctv-video-empty { min-height: 118px; display: grid; place-items: center; padding: 14px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--ink-2); text-align: center; font-size: 12.5px; }
.cctv-origin-note { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; }
.cctv-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.cctv-actions a { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--accent); font-weight: 700; }
.tmd-radar-img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); }

/* ===== Forms (report / track) ===== */
.page { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 14px; }
.crumb { font-size: 12.5px; color: var(--ink-3); }
.crumb a { color: var(--ink-2); }
.page h1 { margin: 0; font: 700 24px/1.25 var(--display); }
.page .lead { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.fld { display: grid; gap: 6px; margin-bottom: 14px; }
.fld label, .fld .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fld label b { color: var(--crit); }
.fld input, .fld select, .fld textarea { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 15px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.fld small { font-size: 12px; color: var(--ink-3); }
.fld .err, .err { color: var(--crit); font-size: 12.5px; }
.err:empty { display: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 16px var(--display); }
.step i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 13px var(--mono); font-style: normal; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 6px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 8px; min-height: 80px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.opt span b { font-size: 24px; line-height: 1; }
.opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.sev .opt span { min-height: 44px; place-items: center; }
.sev .s3 input:checked + span, .sev .s4 input:checked + span { border-color: var(--crit); background: var(--crit-bg); color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.sev .s2 input:checked + span { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.sev .s1 input:checked + span { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.pickmap { height: 320px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; font-size: 12.5px; color: var(--ink-3); }
.previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.previews figure { margin: 0; position: relative; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.previews img { width: 100%; height: 100%; object-fit: cover; }
.previews button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 13.5px; }
.alert.crit { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.alert.info { background: var(--accent-soft); color: var(--accent); }
.alert strong { display: block; }
.code-big { display: inline-block; margin: 10px 0; padding: 10px 18px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font: 700 28px var(--mono); letter-spacing: .12em; }
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 20px; }
.timeline::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 14px 6px; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); border: 2px solid var(--surface); }
.timeline li.cur::before { background: var(--accent); }
.timeline strong { display: block; font-size: 14px; }
.timeline small { color: var(--ink-3); font-size: 12px; }
.timeline p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .dash-header { padding: 12px 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .roadgrid, .radargrid, .cctvgrid, .two { grid-template-columns: minmax(0, 1fr); }
  .mapbox { height: 380px; } .roadlist, .cctvlist { max-height: 360px; }
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fresh .fx { display: none; }
  .brand h1 { font-size: 18px; }
  .brand-logo { height: 38px; }
  .dash-header { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 12px 14px; }
  .dash-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
  .dash-btn { justify-content: center; width: 100%; font-size: 12.5px; padding: 6px 10px; }
  .now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .now > div:nth-child(3) { border-left: 0; }
  .now > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .panel { padding: 14px 14px 16px; }
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hot { grid-template-columns: 1fr 1fr; }
  .nav .hotline span { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .sev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-val { font-size: 22px; }
  /* การ์ดสรุปแถวละ 2 ใบกว้างแค่ ~165px: ชื่อการ์ดเต็มบรรทัด ป้ายสถานะลงบรรทัดถัดไป · รายละเอียดได้ 2 บรรทัดก่อนตัด … */
  .t-top { height: auto; flex-direction: column; align-items: flex-start; gap: 4px; }
  .t-lbl { white-space: normal; line-height: 1.3; }
  .t-sub, .t-sub2 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (max-width: 680px) {
  /* หัวกลุ่ม: ป้ายคำอธิบายขึ้นบรรทัดใหม่และตัดคำได้ แทนการยื่นออกนอกจอ */
  .dash-group-header { flex-wrap: wrap; gap: 6px 10px; }
  .dash-group-line { display: none; }
  .dash-group-tag { white-space: normal; border-radius: 12px; }
}
@media (max-width: 420px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 11px 12px; }
  .fresh { display: none; }
  .dash-actions { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ===== ไอคอนเส้น (app/icons.php) แทน emoji ===== */
.ic { flex: none; display: inline-block; vertical-align: -0.18em; }
.with-ic { display: flex; align-items: center; gap: 8px; }
.dash-group-title .ic { color: var(--accent); }
.opt span b { display: grid; place-items: center; color: var(--accent); }
.pin.rep { color: var(--warn); }
.pin.rep svg { width: 13px; height: 13px; }
.done-ic { color: var(--ok); }

/* ปุ่มรีเซ็ตบนแผนที่กล้อง (อยู่ใต้ปุ่มซูม) */
.map-reset a { display: grid !important; place-items: center; width: 30px; height: 30px; color: var(--ink); background: var(--surface); cursor: pointer; }
.map-reset a:hover { background: var(--surface-2); color: var(--accent); }

/* แถบแจ้งมีข้อมูลใหม่ (ตอนผู้ใช้กำลังดูกล้อง/เปิด popup อยู่ จึงไม่โหลดทับ) */
.fresh-bar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2000; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.fresh-bar button { border: 0; border-radius: 999px; padding: 6px 14px; background: var(--accent); color: #fff; font: 600 13px var(--body); cursor: pointer; }
/* ทิศทางน้ำไหลบนเส้นลำน้ำ (แผนที่สถานการณ์): ขีดสว่างวิ่งจากต้นน้ำไปปลายน้ำ — รอบ dash 16px (3 + 13) จึงวนต่อเนื่องไม่กระตุก */
.riv-flow { animation: riv-flow 1.8s linear infinite; }
.riv-flow.big { animation-duration: 1.1s; }
/* ช่วงใกล้ตลิ่ง/ล้นตลิ่ง (ตามสถานีใกล้): วิ่งเร็วขึ้น — ล้นตลิ่งเร็วสุด */
.riv-flow.hot.warn { animation-duration: 1.5s; } .riv-flow.hot.crit { animation-duration: 1.25s; }
.riv-flow.big.hot.warn { animation-duration: .95s; } .riv-flow.big.hot.crit { animation-duration: .8s; }
@keyframes riv-flow { to { stroke-dashoffset: -16; } }
/* ช่วงน้ำขึ้นน้ำลง: วิ่งช้ากว่าน้ำไหลปกติ */
.riv-flow.riv-tide { animation-duration: 2.2s; }
/* กลับทิศตอนน้ำขึ้น / บริเวณน้ำชนช้าลง / ป้าย “น้ำชน” — กติกาแยกตามสถานีน้ำ ff.js สร้างให้ (.tin-<รหัส> .st-<รหัส>) */
.riv-meet-pin { display: none !important; }
.riv-meet-pin span { padding: 2px 8px; border-radius: 999px; background: #0e7490; color: #fff; font: 700 11.5px/1.4 var(--body); white-space: nowrap; box-shadow: 0 0 0 2px #9ff5e1, 0 2px 8px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .riv-flow, .riv-flow.big, .riv-flow.hot.warn, .riv-flow.hot.crit, .riv-flow.big.hot.warn, .riv-flow.big.hot.crit { animation: none; } }
.maplegend .lg-river { width: 16px; height: 3px; border-radius: 2px; background: var(--water); }
/* น้ำท่วมจากดาวเทียม GISTDA (ภาพแผนที่) — สีใกล้เคียงภาพของ GISTDA */
.maplegend .lg-gistda { width: 14px; height: 10px; border-radius: 2px; background: #4a73c8; opacity: .8; }
.maplegend .lg-river-lvl { width: 22px; background: linear-gradient(90deg, var(--ok) 0 25%, var(--warn) 25% 50%, var(--crit) 50% 75%, var(--water) 75%); }
.maplegend .lg-river.lg-tide { background: repeating-linear-gradient(90deg, var(--water) 0 4px, #9ff5e1 4px 7px); }
/* ตารางเวลาน้ำจากต้นน้ำมาถึง: แถวที่ล้นตลิ่ง/กำลังขึ้น */
table.travel tr.tr-alert td { background: color-mix(in srgb, var(--crit) 8%, transparent); }
table.travel td b { white-space: nowrap; }
table.tw.travel { min-width: 0; }
table.tw.travel td { white-space: normal; }

/* ===== เส้นทางมวลน้ำจากต้นน้ำ (แผนที่สถานการณ์) ===== */
.route-flow { animation: route-flow 1s linear infinite; }  /* ระยะเลื่อน 20 = ขีด+ช่องของ dashArray ใน ff.js */
@keyframes route-flow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .route-flow { animation: none; } }
.route-target i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.route-target span { position: absolute; left: 12px; top: -10px; padding: 2px 8px; border-radius: 8px; background: var(--accent); color: #fff; font: 700 11.5px/1.4 var(--body); white-space: nowrap; }
.maplegend .lg-route { width: 18px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--crit) 0 5px, color-mix(in srgb, var(--crit) 20%, transparent) 5px 9px); }

/* แผนที่สถานการณ์คอลัมน์เดียว: แผนที่เต็มความกว้าง แท็บรายการ (ถนน · ระดับน้ำ · เขื่อน · ฝน · รายงาน) อยู่แถวล่าง
   รายการเรียงเป็นการ์ดหลายคอลัมน์ตามความกว้าง (จอแคบเหลือ 1 คอลัมน์) */
.routes-card .roadgrid.roadgrid-stack { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.roadgrid-stack .sitlist .roadlist, .roadgrid-stack .sitlist .roadlist#roadList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px;
  max-height: 440px; padding: 2px; border: 0; border-radius: 0;
}
.roadgrid-stack .roadlist li { border: 1px solid var(--line); border-radius: 10px; }
.roadgrid-stack .roadlist li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 680px) { .roadgrid-stack .sitlist .roadlist, .roadgrid-stack .sitlist .roadlist#roadList { max-height: 380px; } }
.roadgrid-stack .roadlist .r2 { flex-direction: column; align-items: flex-start; gap: 4px; }
.roadgrid-stack .roadlist .r2 a { white-space: nowrap; }
/* น้ำจากคลอง */
.canal-state { margin: 4px 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.canal-state.on { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--ink); }
.canal-state.on b { color: var(--warn); }
table.travel tr.tr-outlet td { background: color-mix(in srgb, var(--water) 7%, transparent); }
table.tw.travel td.nw { white-space: nowrap; }
/* น้ำจากคลอง: กำลังระบาย → ขีดวิ่งไปทางแม่น้ำ */
.canal-flow { animation: route-flow 1.4s linear infinite; }  /* ระยะเลื่อน 20 = ขีด+ช่องของ dashArray ใน ff.js */
@media (prefers-reduced-motion: reduce) { .canal-flow { animation: none; } }
.maplegend .lg-canal-local { width: 18px; height: 2px; border-radius: 2px; background: var(--water); opacity: .8; }
.maplegend .lg-canal { width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ok) 0 5px, transparent 5px 6.5px, var(--warn) 6.5px 11.5px, transparent 11.5px 13px, var(--crit) 13px); }
/* จุดวัดคลอง กทม. ในกล่องน้ำจากคลอง */
.bma { margin: 0 0 6px; }
.bma-h { margin: 0 0 6px; font-size: 13.5px; }
.bma-h .muted { font-size: 12px; margin-left: 4px; }
.bma .chips { margin-bottom: 8px; }
.bma-pin { display: block; width: 11px; height: 11px; margin: 1.5px; transform: rotate(45deg); border: 2px solid #fff; background: var(--ok); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.bma-pin.warn { background: var(--warn); }
.bma-pin.crit { background: var(--crit); }
.bma-pin.off { background: var(--ink-3); }
.maplegend .lg-bma { width: 9px; height: 9px; border-radius: 1px; transform: rotate(45deg); background: var(--crit); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }
.dash-card .bma .tblwrap { max-height: none; }

/* ===== ความเสี่ยงน้ำท่วม (ใต้แถบหัวแดชบอร์ด) — แผงเรียบ ซ้าย: ระดับ/ช่วงเวลา · ขวา: ปัจจัย ===== */
.risk-card { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; scroll-margin-top: 90px; }
.risk-side { padding: 14px 16px; border-right: 1px solid var(--line); background: var(--surface-2); }
.risk-kick { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.risk-side h2 { margin: 2px 0 10px; font: 600 17px/1.3 var(--display); }
.risk-level { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.risk-level b { font: 700 24px/1 var(--display); }
.risk-bars { display: inline-flex; align-items: flex-end; gap: 3px; }
.risk-bars i { width: 7px; border-radius: 2px; background: var(--line-2); }
.risk-bars i:nth-child(1) { height: 10px; } .risk-bars i:nth-child(2) { height: 16px; } .risk-bars i:nth-child(3) { height: 22px; }
.lvl-ok .risk-bars i:nth-child(1) { background: var(--ok); }
.lvl-warn .risk-bars i:nth-child(-n+2) { background: var(--warn); }
.lvl-crit .risk-bars i { background: var(--crit); }
.lvl-ok .risk-level b { color: var(--ok); } .lvl-warn .risk-level b { color: var(--warn); } .lvl-crit .risk-level b { color: var(--crit); }
.risk-when { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.risk-when b { color: var(--ink); }
.risk-body { padding: 12px 16px; min-width: 0; }
.risk-factors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 18px; }
.risk-factors li { position: relative; padding: 4px 0 4px 14px; font-size: 13.5px; line-height: 1.45; }
.risk-factors li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 2px; background: var(--warn); }
.risk-factors li.crit::before { background: var(--crit); }
.risk-none { margin: 4px 0; color: var(--ink-2); }
.risk-helps { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }
.risk-helps b { color: var(--ok); margin-right: 4px; }
.risk-note { margin: 8px 0 0; font-size: 11px; color: var(--ink-3); }
@media (max-width: 760px) { .risk-card { grid-template-columns: 1fr; } .risk-side { border-right: 0; border-bottom: 1px solid var(--line); } }
/* ย่อ/ขยายรายการใต้แผนที่สถานการณ์ */
.sit-tabs .sit-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.sit-tabs .sit-toggle:hover { color: var(--ink); background: var(--surface-2); }
.sit-tabs .sit-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sitlist.collapsed .sit-panel { display: none; }
.sitlist.collapsed .sit-tabs button[role="tab"][aria-selected="true"] { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); font-weight: 400; }
.sitlist.collapsed .sit-tabs button[role="tab"][aria-selected="true"] b { color: var(--ink); }
/* หน้าที่มาของข้อมูลและลิขสิทธิ์ */
.page.page-wide { max-width: 1100px; }
.src-tbl { min-width: 720px; }
.src-tbl td { white-space: normal !important; font-family: var(--body) !important; font-size: 13px !important; text-align: left !important; vertical-align: top; }
.src-tbl th { text-align: left !important; }
.legal { margin: 0; padding: 12px 14px; border-left: 3px solid var(--line-2); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.legal p { margin: 0 0 8px; } .legal p:last-child { margin: 0; }
.legal-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.foot a { color: inherit; text-decoration: underline; }
/* ปุ่มกลับขึ้นด้านบน (มุมขวาล่าง · อยู่เหนือแถบ “มีข้อมูลใหม่” ที่อยู่กลางล่าง) */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1900; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); cursor: pointer; }
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--surface-2); color: var(--accent); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#main:focus { outline: none; }

/* ===== ตัววิ่งข้อจำกัดความรับผิดชอบ (บนสุดของหน้าสถานการณ์) ===== */
.ticker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); font-size: 13px; overflow: hidden; }
.ticker-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: var(--warn); color: #fff; font-weight: 700; font-size: 12px; }
.ticker-view { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker 75s linear infinite; color: var(--ink); }
.ticker-track span { padding-right: 64px; }
.ticker-view:hover .ticker-track, .ticker-view:focus .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-more { flex: none; color: var(--accent); font-size: 12.5px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .ticker-view { mask-image: none; }
  .ticker-track { animation: none; white-space: normal; display: block; }
  .ticker-track span[aria-hidden] { display: none; }
}

/* น้ำที่ตัวเมืองตอนนี้และต่อจากนี้ (แทนตาราง “น้ำจากต้นน้ำจะมาถึง…”) */
.city-now .cn-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 38%); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 5px solid var(--ok); background: var(--surface-2); }
.city-now .cn-now.cn-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.city-now .cn-now.cn-crit { border-left-color: var(--crit); background: var(--crit-bg); }
.cn-val { display: grid; gap: 2px; min-width: 0; }
.cn-lbl { font-size: 13px; font-weight: 600; color: var(--ink); }
.cn-lbl small { font-weight: 400; color: var(--ink-3); }
.cn-val b { font: 700 30px/1.1 var(--mono); color: var(--ink); }
.cn-val b small { font-size: 14px; font-weight: 600; }
.cn-diff { font-size: 13px; color: var(--ink-2); }
.cn-spark { display: grid; gap: 2px; font-size: 11px; color: var(--ink-3); text-align: right; }
.cn-spark .t-line { height: 44px; }
.cn-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.cn-rows li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 9px 2px 9px 10px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.cn-rows li:last-child { border-bottom: 0; }
.cn-rows li.warn { border-left-color: var(--warn); } .cn-rows li.crit { border-left-color: var(--crit); } .cn-rows li.ok { border-left-color: var(--ok); }
.cn-rows span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding-top: 1px; }
.cn-rows p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cn-rows small { display: block; font-size: 12px; color: var(--ink-3); }
@media (max-width: 520px) { .city-now .cn-now { grid-template-columns: 1fr; } .cn-spark { text-align: left; } .cn-rows li { grid-template-columns: 1fr; gap: 2px; } }