/* =========================================================
   น้ำท่วมบางนา — สไตล์ทั้งแอป ตาม Design_structure/design_handoff_weather_app
   ค่าสี/ขนาดทั้งหมดมาจาก tokens.css — ห้ามใส่เลขสีตรง ๆ ในไฟล์นี้
   ลำดับ: 1 base · 2 shell (rail/header/aside) · 3 core (card/button/badge/segmented/field)
          4 weather (hero/city/forecast/wind/aqi/sun) · 5 data (tile/tank/bars/calendar/table)
          6 charts · 7 cars · 8 utilities · 9 จอแคบ
   ========================================================= */

/* ---------- 1. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-main);color:var(--text-1);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background var(--dur-slow)}
h1,h2,h3{margin:0;line-height:1.35;text-wrap:balance}
p{margin:0}
a{color:var(--text-accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}
input,select{font-size:16px} /* iOS ซูมจอเองถ้าช่องกรอก < 16px */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg,img{display:block}
table,.num{font-variant-numeric:tabular-nums}

/* ---------- 2. shell ----------
   เดสก์ท็อป: คอลัมน์หลัก + aside 400px (aside ติดจอ) · แถบเมนูลอยซ้ายบน
   หน้าต่างเลื่อนทั้งหน้า (ไม่ใช่เลื่อนในกล่อง) เพื่อให้ window.scrollTo ใน app.js ใช้ได้ตรง ๆ */
.shell{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-width);grid-template-areas:"top aside" "view aside";grid-template-rows:auto 1fr;min-height:100vh}
.top{grid-area:top;padding:52px 48px 0 116px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
#view{grid-area:view;padding:32px 48px 48px 116px;display:flex;flex-direction:column;gap:28px;min-width:0;outline:none}
body[data-route="overview"] #view{padding-top:40px}

.rail{position:fixed;left:24px;top:52px;z-index:10;width:var(--rail-width);padding:8px;border-radius:var(--r-xl);background:var(--surface-card);border:1px solid var(--border-subtle);display:flex;flex-direction:column;align-items:center;gap:4px}
.rail a{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);color:var(--text-3);transition:all var(--dur-base) var(--ease-out)}
.rail a:hover{background:var(--surface-hover);color:var(--text-1);text-decoration:none}
.rail a[aria-current="page"]{background:var(--text-1);color:var(--surface-card)}
.rail a[aria-current="page"]::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:2px;background:var(--teal-400)}
.rail .tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--text-1);color:var(--surface-card);font-size:var(--fs-xs);font-weight:600;padding:4px 8px;border-radius:var(--r-xs);pointer-events:none;opacity:0;transition:opacity var(--dur-fast)}
.rail a:hover .tip,.rail a:focus-visible .tip{opacity:1}

/* header: หน้าภาพรวม = นาฬิกา · หน้าอื่น = ชื่อหน้า */
.clock{font-family:var(--font-display);font-size:var(--fs-display);font-weight:600;line-height:1;letter-spacing:var(--ls-display);color:var(--text-1);white-space:nowrap}
.date{font-size:var(--fs-sm);margin-top:10px;color:var(--text-3);letter-spacing:.08em;font-weight:600}
.greet{display:flex;align-items:center;gap:12px;margin-top:22px;font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;color:var(--text-2)}
.greet .ic{color:var(--sun-glyph)}
.page-title{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:600;letter-spacing:-0.02em}
.page-sub{font-size:var(--fs-body);color:var(--text-2);margin-top:8px}
.top-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.stamp{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}

.aside{grid-area:aside;position:sticky;top:0;height:100vh;overflow:auto;background:var(--bg-aside);padding:36px 40px 28px;display:flex;flex-direction:column;gap:22px}
.aside .stack-cards{display:flex;flex-direction:column;gap:22px}
.aside-top{display:flex;align-items:center;gap:14px}
.loc{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px;border-radius:var(--r-md);background:var(--surface-field);border:1px solid var(--border-subtle);color:var(--text-2);font-size:var(--fs-sm);font-weight:600}
.loc .ic{color:var(--text-accent);flex:none}
.loc span{line-height:1.35}
.avatar{width:44px;height:44px;border-radius:50%;flex:none;background:var(--amber-300);color:var(--ink-900);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:15px}

/* ---------- 3. core ---------- */
.card{background:var(--surface-card);border-radius:var(--r-xl);padding:22px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:18px;min-width:0}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.card-head h2,.card h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.01em}
.card-head p{color:var(--text-3);font-size:var(--fs-sm)}
.card h3{font-family:var(--font-display);font-size:var(--fs-body);font-weight:600}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,240px)),1fr))}
.grid.tiles{--min:170px;gap:20px}
.grid.cols-2{--min:340px}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.hint{color:var(--text-3);font-size:var(--fs-sm)}
.small{font-size:var(--fs-xs);color:var(--text-3)}
.note{font-size:var(--fs-sm);color:var(--text-2);line-height:1.65}
.note ul,.note ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.note code{font-size:12px;background:var(--surface-inset);padding:1px 5px;border-radius:var(--r-xs)}

/* ปุ่ม: primary = teal · ค่าเริ่มต้น = soft (พื้นการ์ด + เส้นบาง) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:var(--r-sm);border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-2);font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--surface-hover);text-decoration:none}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--text-on-color)}
.btn.primary:hover{box-shadow:var(--shadow-float)}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{position:relative;width:44px;height:44px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;padding:0}
.icon-btn:hover{background:var(--surface-hover);text-decoration:none}
.icon-btn.soft{background:var(--surface-card);border-color:var(--border-subtle)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:2px;background:var(--coral-500);box-shadow:0 0 0 2px var(--bg-aside)}
.busy .ic{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ป้ายสถานะ: มุม 4 · จุดเหลี่ยม 6px · มีข้อความเสมอ (สีไม่ใช่ตัวบอกเดียว) */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:600;line-height:1.35;white-space:nowrap;background:var(--accent-soft);color:var(--text-accent)}
.badge::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;flex:none}
.badge.ok{background:var(--okbg);color:var(--ok)} .badge.mod{background:var(--modbg);color:var(--mod)}
.badge.mid{background:var(--midbg);color:var(--mid)} .badge.bad{background:var(--badbg);color:var(--bad)}
.badge.none{background:var(--surface-inset);color:var(--text-3)}
.t-ok{color:var(--ok)} .t-mid{color:var(--mid)} .t-bad{color:var(--bad)}

/* segmented (เลือกได้ตัวเดียว) + chip (เลือกได้หลายตัว) — ตัวที่เลือก = เติมสีหมึก */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--surface-card);border:1px solid var(--border-subtle)}
.seg button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 12px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;background:transparent;color:var(--text-3);transition:all var(--dur-base) var(--ease-out)}
.seg button.icon{padding:0}
.seg button:hover{color:var(--text-1)}
.seg button[aria-pressed="true"]{background:var(--text-1);color:var(--surface-card)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--surface-card);cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);transition:all var(--dur-fast) var(--ease-out)}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.chip:has(input:checked),.chip[aria-pressed="true"]{background:var(--text-1);border-color:var(--text-1);color:var(--surface-card)}
.chip:has(input:checked) .small{color:inherit;opacity:.85}

.field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--text-3);font-weight:600}
.field input,.field select{min-height:44px;padding:8px 12px;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface-field);color:var(--text-1);min-width:0;width:100%}
.inline-field{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.inline-field select{min-height:40px;padding:4px 10px;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface-field)}

/* ---------- 4. weather ---------- */
.wx{display:grid;place-items:center;flex:none;border-radius:var(--r-lg);user-select:none}
/* สีตามชนิดอากาศ — บนการ์ดสีทึบ (hero / การ์ดที่เลือก / daycard) ใช้สีขาวตามพื้น */
.wx.sun-cloud-rain{color:var(--sun-glyph)} .wx.rain-drops{color:var(--water-500)}
.wx.cloud-lightning,.wx.cloud-lightning-lg{color:var(--teal-600)} .wx.storm{color:var(--coral-500)}
.wx.cloud-moon,.wx.wind-moon{color:var(--text-3)}
[data-theme="dark"] .wx.rain-drops{color:var(--water-300)} [data-theme="dark"] .wx.cloud-lightning,[data-theme="dark"] .wx.cloud-lightning-lg{color:var(--teal-300)}
.hero-card .wx,.fday.on .wx,.daycard .wx{color:#fff}

/* การ์ดหลัก (hero): พื้น teal แบน แบ่งด้วยเส้นขอบฟ้า — สภาพด้านบน · แถบตัวเลขด้านล่าง */
.hero-card{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--fill-primary);color:#fff;box-shadow:var(--shadow-float);display:flex;flex-direction:column;flex-shrink:0}
a.hero-card:hover{text-decoration:none}
.hero-card .up{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px}
.hero-card .row1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hero-card .place{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;line-height:1.35}
.hero-card .when{font-size:var(--fs-xs);white-space:nowrap}
.hero-card .big{display:flex;align-items:flex-end;justify-content:space-between;margin-top:14px;gap:8px}
.hero-card .num{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:600;line-height:.9;letter-spacing:var(--ls-display)}
.hero-card .num small{font-size:22px;letter-spacing:0;margin-left:4px}
.hero-card .cond{font-size:var(--fs-body);font-weight:600;margin-top:12px;line-height:1.4}
.hero-card .wx{margin:0 -8px -4px 0;flex:none}
.hero-card .strip{display:flex;gap:16px;padding:16px 24px 18px;background:var(--fill-primary-strip)}
.hero-card .metric{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.hero-card .metric .lab{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);letter-spacing:.04em}
.hero-card .metric .v{font-family:var(--font-display);font-size:18px;font-weight:600}

/* การ์ดเมือง (city): coral / amber · lifted = ยกลอยเหนือบล็อกสีหมึก */
.city{position:relative;flex-shrink:0;display:block;color:var(--ink-900);text-decoration:none}
.city:hover{text-decoration:none}
.city .face{position:relative;border-radius:var(--r-lg);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:transform var(--dur-slow) var(--ease-spring)}
.city.coral .face{background:var(--fill-coral)}
.city.amber .face{background:var(--fill-amber)}
.city.lifted::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);background:var(--text-1)}
.city.lifted .face{transform:translate(-6px,-6px)}
.city.lifted:hover .face{transform:translate(-8px,-8px)}
.city .nm{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--fs-body);font-weight:600;line-height:1.35}
.city .sub{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-sm);margin-top:8px}
.city .sub span{display:flex;align-items:center;gap:5px}
.city .val{font-family:var(--font-display);font-size:var(--fs-temp-md);font-weight:600;letter-spacing:-0.04em;line-height:1;white-space:nowrap}
.city .val small{font-size:var(--fs-sm);letter-spacing:0;margin-left:3px}

/* การ์ดพยากรณ์ (ForecastDayCard) — ใช้ทั้งรายช่วง 3 ชม. และรายวัน */
.fstrip{display:flex;gap:12px;flex-wrap:wrap}
.fday{flex:1 0 92px;min-width:92px;height:160px;border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-1);font-family:var(--font-sans);transition:all var(--dur-base) var(--ease-out)}
button.fday{cursor:pointer}
button.fday:hover{background:var(--surface-hover)}
.fday .lab{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;color:var(--text-3)}
.fday .wx{align-self:center}
.fday .v{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.03em;line-height:1}
.fday .v small{font-size:var(--fs-xs);letter-spacing:0;font-weight:600;margin-left:3px}
.fday .p{font-size:var(--fs-xs);color:var(--text-3);margin-top:4px}
.fday.on,button.fday.on:hover{background:var(--fill-primary);border-color:transparent;color:#fff;box-shadow:var(--shadow-float)}
.fday.on .lab,.fday.on .p{color:#fff}
.fday.heavy .v{color:var(--bad)}
.fday.on.heavy .v{color:#fff}

/* ลม (WindChart): ชิปสี่เหลี่ยม 24px ลูกศรหมุนตามทิศ · แรง ≥ 75% ของสูงสุด = เติม teal */
.wind{display:grid;gap:4px;align-items:end}
.wind .c{display:flex;flex-direction:column;align-items:center;gap:6px}
.wind .v{font-size:11px;font-weight:600}
.wind .chip2{width:24px;height:24px;border-radius:var(--r-sm);display:grid;place-items:center;border:1px solid var(--border-subtle);color:var(--text-2)}
.wind .chip2.strong{background:var(--fill-primary);border-color:transparent;color:#fff}
.axis{display:grid;font-size:11px;color:var(--text-3);text-align:center}

/* เส้นค่า (ValueLine) + แท่งฝน (PrecipBars) */
.vline svg{width:100%;height:auto;overflow:visible}
.vline text{font-family:var(--font-sans);font-size:11px;font-weight:600;fill:var(--text-1)}
.pbars{display:grid;align-items:end;border-bottom:1px solid var(--border-subtle);column-gap:4px}
.pbars .c{display:flex;flex-direction:column;align-items:center;gap:4px}
.pbars .c span{font-size:11px;font-weight:600}
.pbars .c span.z{color:var(--text-3)}
.pbars .c i{width:70%;background:var(--chart-rain);border-radius:4px 4px 0 0}

/* คุณภาพอากาศ (AqiPanel): พื้นอ่อน + ตัวเข้มในโหมดสว่าง · โปร่ง + ตัวสว่างในโหมดมืด */
.aqi-head{display:flex;align-items:center;gap:12px}
.aqi-head .ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.aqi-head .t{font-weight:700}
.aqi-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px}
.aqi-tile{border-radius:var(--r-md);padding:10px 6px;text-align:center}
.aqi-tile b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600}
.aqi-tile span{font-size:11px;font-weight:600}
.aqi-tile.ok,.aqi-head .ico.ok{background:var(--okbg);color:var(--ok)}
.aqi-tile.mod,.aqi-head .ico.mod{background:var(--modbg);color:var(--mod)}
.aqi-tile.mid,.aqi-head .ico.mid{background:var(--midbg);color:var(--mid)}
.aqi-tile.bad,.aqi-head .ico.bad{background:var(--badbg);color:var(--bad)}

/* ดวงอาทิตย์ (SunArc) */
.sunarc svg{width:100%;height:auto}
.sunarc text{font-family:var(--font-sans);font-size:12px;fill:var(--text-3)}
.sunarc .track{fill:none;stroke:var(--border-subtle);stroke-width:2;stroke-dasharray:4 5}
.sunarc .done{fill:none;stroke:var(--amber-500);stroke-width:2.5}
.sunarc .big{font-family:var(--font-display);font-size:18px;font-weight:600;fill:var(--text-1)}

/* ---------- 5. data ---------- */
/* StatTile */
.tile{background:var(--surface-card);border-radius:var(--r-xl);padding:18px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px;min-width:0}
a.tile{color:inherit}
a.tile:hover{text-decoration:none;background:var(--surface-hover)}
.tile .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile .ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.tile.sky .ico{background:var(--accent-soft);color:var(--text-accent)}
.tile.water .ico{background:var(--water-100);color:var(--water-700)}
.tile.rose .ico{background:var(--coral-200);color:#b23f2c}
.tile.amber .ico{background:var(--amber-200);color:#8a5f07}
.tile .lab{font-size:var(--fs-sm);color:var(--text-3);line-height:1.4}
.tile .val{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-0.03em;margin-top:4px;line-height:1.1}
.tile .val small{font-size:var(--fs-sm);color:var(--text-3);margin-left:4px;letter-spacing:0;font-weight:600}
.tile .cmp{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;margin-top:6px}
.tile .cmp b{color:var(--text-1)}
.delta{font-size:var(--fs-xs);font-weight:600}
.delta.up{color:var(--bad)} .delta.down{color:var(--ok)}

/* ถังวัดระดับน้ำ (WaterLevelGauge) */
.station{cursor:pointer;text-align:left;color:var(--text-1);background:var(--surface-card);border-radius:var(--r-xl);padding:22px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base) var(--ease-out);min-width:0}
.station[aria-pressed="true"]{border-color:var(--text-1);box-shadow:0 0 0 1px var(--text-1)}
div.station{cursor:default}
.gauge{display:flex;gap:16px;align-items:stretch}
.tank{position:relative;width:48px;height:var(--h,190px);margin-right:36px;flex:none}
.tank .box{position:absolute;inset:0;border-radius:var(--r-sm);background:var(--chart-track);overflow:hidden;background-image:repeating-linear-gradient(to top,var(--border-subtle) 0 1px,transparent 1px var(--tick,10%))}
.tank .fill{position:absolute;left:0;right:0;bottom:0;background:var(--grad-water);transition:height var(--dur-slow) var(--ease-out)}
.tank .mk{position:absolute;left:-4px;right:-4px;height:2px}
.tank .mk span{position:absolute;left:100%;margin-left:6px;top:-8px;font-size:10px;font-weight:700;white-space:nowrap}
.tank .mk.warn{background:var(--line-warn)} .tank .mk.warn span{color:var(--text-warn)}
.tank .mk.crit{background:var(--line-crit)} .tank .mk.crit span{color:var(--text-crit)}
.tank .mk.bank{background:var(--text-1)} .tank .mk.bank span{color:var(--text-1)}
.gauge .info{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px;min-width:0}
.gauge .nm{font-family:var(--font-display);font-size:var(--fs-body);font-weight:600;line-height:1.4}
.gauge .meta{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;line-height:1.45}
.gauge .lv{font-family:var(--font-display);font-size:var(--fs-temp-md);font-weight:600;letter-spacing:-0.04em;line-height:1}
.gauge .lv small{font-size:var(--fs-sm);color:var(--text-3);margin-left:4px;letter-spacing:0}
.gauge .gap{font-size:var(--fs-sm);color:var(--text-2);margin-top:6px}
.gauge .trend{font-size:var(--fs-xs);font-weight:600;margin-top:4px;min-height:1.4em}
.gauge .trend.up{color:var(--text-crit)} .gauge .trend.down{color:var(--ok)}

/* แถวสรุปแบบย่อ */
.rows{display:flex;flex-direction:column}
.rows>*{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border-subtle);min-width:0}
.rows>*:first-child{border-top:0;padding-top:0}
.rows .grow{flex:1;min-width:0}
.rows .nm{font-weight:600;font-size:var(--fs-sm);line-height:1.4}
.rows .meta{font-size:var(--fs-xs);color:var(--text-3);line-height:1.45}
.rows .v{font-family:var(--font-display);font-weight:600;font-size:18px;white-space:nowrap;text-align:right}
.rows .v small{font-size:var(--fs-xs);color:var(--text-3);margin-left:3px}
a.rowlink{color:inherit}
a.rowlink:hover{text-decoration:none}
a.rowlink:hover .nm{color:var(--text-accent)}

/* แถบแนวนอนไล่สีน้ำ (Rain by month) */
.hbar{display:block;height:8px;border-radius:9px;background:var(--chart-track);overflow:hidden}
.hbar i{display:block;height:100%;border-radius:9px;background:var(--grad-water)}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbars .r{display:grid;grid-template-columns:52px 1fr 64px;gap:10px;align-items:center;font-size:var(--fs-sm)}
.hbars .r>span:first-child{color:var(--text-3)}
.hbars .r>span:last-child{text-align:right;font-weight:600}

/* แท่งคู่รายเดือน (RainfallBars) */
.rbars{display:flex;flex-direction:column;gap:10px}
.rbars .cols{display:flex;justify-content:space-between;align-items:flex-end;height:var(--h,150px);border-bottom:1px solid var(--border-subtle)}
.rbars .c{display:flex;align-items:flex-end;gap:2px;height:100%}
.rbars .c i{width:8px;border-radius:3px 3px 0 0;min-height:2px}
.rbars .c i.a{background:var(--chart-rain)} .rbars .c i.b{background:var(--chart-sun)}
.rbars .labs{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3)}
.rbars .labs span{width:18px;text-align:center}
.rbars .leg{display:flex;gap:14px;justify-content:flex-end;font-size:var(--fs-xs);color:var(--text-3)}
.rbars .leg span{display:flex;align-items:center;gap:6px}
.rbars .leg i{width:10px;height:10px;border-radius:3px}

/* ปฏิทินฝนทั้งปี (YearCalendar) */
.ycal{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:22px 28px}
.ycal h3{font-size:var(--fs-sm);margin-bottom:8px}
.ycal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ycal .dh{font-size:9px;text-align:center;color:var(--text-3)}
.ycal button{aspect-ratio:1;border:0;padding:0;border-radius:50%;cursor:pointer;font-size:9px;font-family:var(--font-sans);color:var(--text-2);background:var(--heat-0);min-width:0}
.ycal button.l1{background:var(--heat-1)} .ycal button.l2{background:var(--heat-2)}
.ycal button.l3{background:var(--heat-3);color:#fff} .ycal button.l4{background:var(--heat-4);color:#fff}
[data-theme="dark"] .ycal button.l4{color:var(--ink-900)}
.ycal button.na{background:transparent;box-shadow:inset 0 0 0 1px var(--border-subtle);color:var(--text-3)}
.ycal button.future{opacity:.35;cursor:default}
.ycal button.fc{outline:1.5px dashed var(--text-2);outline-offset:-1.5px} /* พยากรณ์ = วงประ แยกจากค่าวัดจริง */
.ycal button.fc.l0{background:transparent}
.ycal button.today{box-shadow:0 0 0 2px var(--coral-500)}
.ycal button.sel{background:var(--text-1);color:var(--surface-card)}
.heat-leg{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-3);flex-wrap:wrap}
.heat-leg i{width:12px;height:12px;border-radius:50%;display:inline-block}
.heat-leg i.na{box-shadow:inset 0 0 0 1px var(--text-3)}
.heat-leg i.fc{outline:1.5px dashed var(--text-2);outline-offset:-1.5px}
.daycard{border-radius:var(--r-xl);background:var(--fill-primary);color:#fff;padding:20px 24px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-float);min-width:0}
.daycard .d{font-size:var(--fs-sm)}
.daycard .l{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;margin-top:4px;line-height:1.3}
.daycard .m{font-size:var(--fs-sm);margin-top:4px}

/* ตาราง — เลื่อนแนวนอนในกล่องตัวเอง หน้าไม่เลื่อนข้าง */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-subtle);border-radius:var(--r-lg)}
.tbl table{border-collapse:collapse;width:100%;min-width:560px}
.tbl th,.tbl td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--border-subtle);white-space:nowrap;font-size:var(--fs-sm)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{font-size:var(--fs-xs);color:var(--text-3);font-weight:600;letter-spacing:.04em;background:var(--surface-inset);position:sticky;top:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.cur td{background:var(--accent-soft);font-weight:600}
.tbl tr.day td{background:var(--surface-inset);font-weight:700;font-size:var(--fs-xs);letter-spacing:.04em;text-align:left;color:var(--text-2)}
.tbl td.wrap{white-space:normal;min-width:180px}
.cell{display:inline-block;min-width:48px;padding:2px 8px;border-radius:var(--r-xs);font-weight:700;text-align:center}
.cell.ok{background:var(--okbg);color:var(--ok)} .cell.mid{background:var(--midbg);color:var(--mid)} .cell.bad{background:var(--badbg);color:var(--bad)}
td.heavy{color:var(--mid);font-weight:700} td.vheavy{color:var(--bad);font-weight:700} td.miss{color:var(--text-3)}

details.fold{border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--surface-card)}
details.fold>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;padding:8px 14px;font-weight:600;font-size:var(--fs-sm);list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(-45deg);transition:transform var(--dur-fast)}
details.fold[open]>summary::before{transform:rotate(45deg)}
details.fold>.fold-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}

.alert{padding:12px 16px;border-radius:var(--r-lg);font-weight:600;font-size:var(--fs-sm);display:block;line-height:1.55} /* block ไม่ใช่ flex — flex ตัด <b>/<a> ในประโยคเป็นคอลัมน์ (เจอ 26 ก.ย.) */
.alert.ok{background:var(--okbg);color:var(--ok)} .alert.mid{background:var(--midbg);color:var(--mid)} .alert.bad{background:var(--badbg);color:var(--bad)} .alert.info{background:var(--accent-soft);color:var(--text-1)}
.err-box{padding:12px 16px;border-radius:var(--r-lg);background:var(--badbg);color:var(--bad);font-size:var(--fs-sm)}
.loading{color:var(--text-3);font-size:var(--fs-sm);padding:6px 0}
.loading::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;margin-right:8px;vertical-align:-2px;animation:spin .8s linear infinite}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
.form .wide{grid-column:1/-1}
.msg{font-size:var(--fs-sm);color:var(--text-3);min-height:1.3em}
.msg.err{color:var(--bad)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border-subtle)}
.list li:first-child{border-top:0}
.list .grow{flex:1;min-width:0;line-height:1.45}
.list .meta{font-size:var(--fs-xs);color:var(--text-3)}
.list a.row{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;min-height:44px;flex:1}

/* ---------- 6. charts ---------- */
.chart{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart svg{width:100%;min-width:640px;height:auto;touch-action:pan-x pan-y}
.chart text{font-family:var(--font-sans);font-size:11px;fill:var(--text-3)}
.chart .ax{stroke:var(--border-subtle);stroke-width:1}
.chart .ax0{stroke:var(--text-3);stroke-width:1}
.chart .gl{stroke:var(--border-subtle);stroke-width:1}
.chart .ref{stroke-width:1.5}
.chart .ref.bad{stroke:var(--line-crit)} .chart .ref.mid{stroke:var(--line-warn);stroke-dasharray:6 5} .chart .ref.muted{stroke:var(--text-3);stroke-dasharray:3 3}
.chart text.refT{font-weight:700;font-size:11px}
.chart text.refT.bad{fill:var(--text-crit)} .chart text.refT.mid{fill:var(--text-warn)} .chart text.refT.muted{fill:var(--text-3)}
.chart .xh{stroke:var(--text-1);stroke-width:1;opacity:.5}
.chart .ttl{font-weight:600;fill:var(--text-2)}
.chart-tip{position:absolute;pointer-events:none;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:0 8px 24px -8px rgba(19,35,42,.25);border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-sm);line-height:1.55;white-space:nowrap;z-index:3}
.chart-tip b{font-variant-numeric:tabular-nums}
.chart-tip .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-sm);color:var(--text-3);align-items:center}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:0}
.legend .ln{display:inline-block;width:14px;height:0;border-top:3px solid;border-radius:3px;margin-right:6px;vertical-align:3px}
.legend .ln.dash{border-top-width:2px;border-top-style:dashed}

/* ---------- 7. cars ---------- */
.car-fig{margin:0;display:flex;flex-direction:column;gap:10px}
.car-fig .scroll{overflow-x:auto}
.car-fig svg{width:100%;min-width:600px;height:auto}
.car-fig text,.gcard text,.cmp-chart text{font-family:var(--font-sans)}
.car-fig .body,.gcard .body{fill:var(--surface-inset);stroke:var(--text-1);stroke-width:1.3}
.car-fig .glass,.gcard .glass{fill:var(--border-subtle)}
.car-fig .tyre,.gcard .tyre{fill:var(--text-1)} .car-fig .rim,.gcard .rim{fill:var(--paper-300)}
.car-fig .ground,.gcard .ground{stroke:var(--text-3);stroke-width:1.6}
.car-fig .water,.gcard .water{fill:var(--water-fill)} .car-fig .wline,.gcard .wline{stroke:var(--water);stroke-width:1.8}
.car-fig .wT{fill:var(--water-700);font-size:13px;font-weight:700}
[data-theme="dark"] .car-fig .wT{fill:var(--water-300)}
.car-fig .curb{fill:var(--border-subtle);stroke:var(--text-3);stroke-width:1}
.car-fig .curbT{fill:var(--text-3);font-size:10.5px;font-weight:600}
.car-fig .dl{stroke-width:1.6} .car-fig .dl.danger{stroke:var(--line-crit)} .car-fig .dl.warn{stroke:var(--line-warn);stroke-dasharray:5 3}
.car-fig .dl-lead{fill:none;stroke-width:1;opacity:.85} .car-fig .dl-lead.danger{stroke:var(--line-crit)} .car-fig .dl-lead.warn{stroke:var(--line-warn)}
.car-fig .dot.danger{fill:var(--line-crit)} .car-fig .dot.warn{fill:var(--line-warn)}
.car-fig .dlT{font-size:13.5px;font-weight:600} .car-fig .dlT.danger{fill:var(--text-crit)} .car-fig .dlT.warn{fill:var(--text-warn)}
.dlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.dlist li{display:flex;gap:8px;align-items:center;color:var(--text-3);line-height:1.45}
.dlist .sw2{flex:none;width:18px;border-top:2px solid var(--line-crit)}
.dlist li.warn .sw2{border-top:2px dashed var(--line-warn)}
.dlist li.hit{color:var(--text-1);font-weight:700}
.dlist li.hit.danger{color:var(--bad)}
.range{display:flex;align-items:center;gap:12px;font-weight:600;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.range input[type=range]{flex:1 1 180px;min-width:140px;accent-color:var(--fill-primary);height:32px}
.range output{font-family:var(--font-display);font-size:28px;letter-spacing:-0.03em;min-width:3ch;text-align:right}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px}
.gcard{border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--surface-card)}
.gcard h3 small{font-family:var(--font-sans);font-weight:500;color:var(--text-3);font-size:var(--fs-xs);margin-left:6px}
.gcard svg{width:100%;height:auto}
.gcard text{font-weight:700;font-size:20px}
.gcard .mk{stroke-width:1.4;stroke-dasharray:6 4} .gcard .mk.c{stroke:var(--line-warn)} .gcard .mk.h{stroke:var(--line-crit)}
.gcard .mkT.c{fill:var(--text-warn)} .gcard .mkT.h{fill:var(--text-crit)}
.gcard .wd{stroke:var(--line-crit);stroke-width:3} .gcard .wdT{fill:var(--text-crit)}
.gcard .wlT{fill:var(--water-700);font-size:19px}
[data-theme="dark"] .gcard .wlT{fill:var(--water-300)}
.gcard .facts{font-size:var(--fs-xs);color:var(--text-3)}
.gcard .ev{font-size:var(--fs-xs);color:var(--bad);font-weight:600}
.gcard .price{font-weight:700;font-size:var(--fs-sm)}

.pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px;align-items:start}
.pg{border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--surface-card)}
.pg summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;cursor:pointer;font-weight:700;font-size:var(--fs-sm);list-style:none}
.pg summary::-webkit-details-marker{display:none}
.pg .bc{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3);border:1px solid var(--border-subtle);border-radius:var(--r-xs);padding:0 8px}
.pg .bc.on{background:var(--text-1);color:var(--surface-card);border-color:var(--text-1)}
.pg .pg-row{padding:0 10px 10px;display:flex;flex-direction:column;gap:4px}
.pg label{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 10px;border:1px solid var(--border-subtle);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-sm);flex-wrap:wrap}
.pg label:has(input:checked){border-color:var(--text-1);box-shadow:0 0 0 1px var(--text-1);font-weight:600}
.pg input{width:16px;height:16px;accent-color:var(--text-1)}
.tag{font-size:11px;font-weight:700;color:var(--text-accent);background:var(--accent-soft);border-radius:var(--r-xs);padding:1px 6px}
.tag.ev{color:var(--bad);background:var(--badbg)}
.pr{font-size:var(--fs-xs);color:var(--text-3);margin-left:auto}

.cmp-chart{overflow-x:auto}
.cmp-chart svg{width:100%;min-width:900px;height:auto}
.cmp-chart .nm{font-size:12.5px;font-weight:600;fill:var(--text-1)}
.cmp-chart .own .nm{fill:var(--text-accent)}
.cmp-chart .sub,.cmp-chart .ax{font-size:10.5px;fill:var(--text-3)}
.cmp-chart .gl{stroke:var(--border-subtle)}
.cmp-chart .b-clear{fill:var(--text-2)} .cmp-chart .b-hub{fill:var(--border-subtle);stroke:var(--text-3);stroke-width:.6} .cmp-chart .b-top{fill:var(--surface-inset);stroke:var(--text-3);stroke-width:.6;stroke-dasharray:3 2}
.cmp-chart .wade{stroke:var(--line-crit);stroke-width:3} .cmp-chart .wadeT{font-size:10.5px;fill:var(--text-crit);font-weight:700}
.cmp-chart .water{fill:var(--water-fill);opacity:.6} .cmp-chart .wline{stroke:var(--water);stroke-width:2}
.cmp-chart .wT{font-size:12px;font-weight:700;fill:var(--water-700)}
.cmp-chart .vd{font-size:11.5px;font-weight:700}
.cmp-chart .vd.ok{fill:var(--ok)} .cmp-chart .vd.mid{fill:var(--mid)} .cmp-chart .vd.bad{fill:var(--bad)}
.legend .k-clear{background:var(--text-2)} .legend .k-hub{background:var(--border-subtle);border:1px solid var(--text-3)} .legend .k-top{background:var(--surface-inset);border:1px dashed var(--text-3)} .legend .k-wade{background:var(--line-crit);width:4px!important} .legend .k-water{background:var(--water-fill)}

/* ---------- 8. utilities ---------- */
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.muted{color:var(--text-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 9. จอแคบ (ดีไซน์ยังไม่มี layout มือถือ — ออกแบบเพิ่มเอง) ----------
   - aside (สถานะตอนนี้) แสดงเฉพาะหน้าภาพรวม ต่อจากหัวหน้า · หน้าอื่นซ่อน ไม่ให้ดันเนื้อหาลงทุกหน้า
   - แถบเมนูย้ายไปติดล่างจอ เผื่อ safe-area ของ iPhone */
@media (max-width:1180px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "aside" "view";grid-template-rows:auto}
  .aside{position:static;height:auto;overflow:visible;background:transparent;padding:24px 48px 0 116px}
  body:not([data-route="overview"]) .aside{display:none}
  body[data-route="overview"] #view{padding-top:24px}
  .aside .stack-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;align-items:start}
}
@media (max-width:760px){
  .top{padding:calc(env(safe-area-inset-top,0px) + 20px) 16px 0}
  #view,body[data-route="overview"] #view{padding:24px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .aside{padding:20px 16px 0}
  .rail{top:auto;left:0;right:0;bottom:0;width:auto;flex-direction:row;justify-content:space-around;gap:0;border-radius:0;border-width:1px 0 0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .rail a{flex:1;max-width:48px;width:auto}
  .rail .tip{display:none}
  .clock{font-size:44px}
  .greet{font-size:18px;margin-top:14px}
  .page-title{font-size:24px}
  .stamp{display:none}
  .card{padding:18px}
  .hero-card .num{font-size:72px}
  .fday{flex-basis:28%;min-width:88px;height:148px}
  .ycal{--cols:2}
}