/* FonBangkok — หน้าฝนรายเขต (/fonbangkok/) — ใช้ tokens + component จาก ../css/ ทั้งหมด ไฟล์นี้มีแค่โครงหน้าที่ต่างจาก dashboard
   (ไม่มีแถบเมนูซ้าย / aside ขวา · คอลัมน์เดียวกลางจอ) */
.fon-wrap{max-width:1180px;margin:0 auto;padding:40px 32px 56px 116px;display:flex;flex-direction:column;gap:28px}
/* หัวข้อที่กดจากแถบเมนู — เว้นขอบบนไม่ให้ชิดจอ */

/* โลโก้หัวหน้า: เมฆ 52px + คำ 36px (เจ้าของขอให้คำใหญ่สมดุลกับเมฆ 28 ก.ย.)
   คำเลื่อนลง 8% — กรอบของคำรวมหาง g ไว้ด้านล่าง ตัวอักษรส่วนใหญ่เลยดูลอยสูงกว่ากึ่งกลางเมฆ */
.fon-logo{display:flex;align-items:center;gap:14px;line-height:1}
.fon-logo .mark{height:52px;width:auto;flex:none}
.fon-logo .word-text{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.01em;line-height:1}
.fon-logo .word{height:36px;width:auto;flex:none;transform:translateY(8%)}
.fon-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.fon-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fon-pick #province{width:150px}
.fon-pick select,.fon-pick input{width:220px;max-width:100%;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);font-family:inherit;font-size:17px;font-weight:600}
.fon-pick .btn{min-height:44px}
/* หัวข้อ "เลือกเขต" แบบบรรทัดเดียว: ชื่อ · ช่องเลือก · ปุ่มตำแหน่ง · ⓘ ชิดขวา */
/* ช่องเลือกเขตอยู่แถวหัวหน้า ข้างปุ่มมืด/สว่าง (28 ก.ย.) · ข้อความจากปุ่มตำแหน่งขึ้นเต็มบรรทัดใต้หัว */
.fon-top .msg{flex-basis:100%;font-size:var(--fs-sm);color:var(--text-2)}
.fon-top .msg:empty{display:none}
.fon #view{padding:0;gap:24px}
/* section: กรอบของแต่ละหัวข้อ + หัวที่มีไอคอนเดียวกับแถบเมนู · หัวข้อที่อยู่บนจอ ไอคอนเข้มเหมือนปุ่มที่เลือกในแถบ */
.fsec{background:var(--bg-aside);border:1px solid var(--border-subtle);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:18px;scroll-margin-top:20px;min-width:0}
.sec-head{display:flex;align-items:center;gap:14px}
.sec-head h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.sec-head p{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.sec-head .grow{flex:1;min-width:0}
/* ปุ่ม ⓘ กลม — วงเล็ก แต่พื้นที่แตะ 44px ด้วย ::after */
.info-btn{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-3);cursor:pointer;padding:0;transition:all var(--dur-fast) var(--ease-out)}
.info-btn::after{content:"";position:absolute;inset:-4px}
.info-btn:hover{color:var(--text-accent);background:var(--accent-soft)}
.info-btn[aria-expanded="true"]{background:var(--text-1);border-color:var(--text-1);color:var(--surface-card)}
.sec-info{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:14px 16px}
.sec-info ul{margin-top:6px}
.sec-ico{position:relative;width:44px;height:44px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-2);transition:all var(--dur-base) var(--ease-out)}
.fsec.on .sec-ico{background:var(--text-1);border-color:var(--text-1);color:var(--surface-card)}
.fsec.on .sec-ico::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:2px;background:var(--teal-400)}
.fon-sec-title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fon-sec-title .hint{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500}
/* ปุ่มสลับค่าวัดของเขต สูงสุด/เฉลี่ย (ใต้หัวข้อฝนวันนี้ + สัปดาห์นี้) */
.agg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.sec-head:has(.agg-row){flex-wrap:wrap}
.fon-hero{display:grid;grid-template-columns:minmax(0,360px) 300px minmax(0,1fr);gap:24px}
.fon-gauge{gap:10px;padding:18px}
/* คอลัมน์แรก = การ์ด "ตกไปแล้ว" (วัดจริง ทึบ) ซ้อนบนการ์ด "ต่อจากนี้" (คาดการณ์ ฟ้าอมเขียว)
   สีฟ้า + ขอบประ = ค่าพยากรณ์ ใช้ภาษาเดียวกับช่องพยากรณ์ในปฏิทินรายปี (แยกการ์ดตามที่ผู้ใช้ขอ 28 ก.ย.) */
/* การ์ด "ฝนที่ตกมาแล้ว" (จัดใหม่ 28 ก.ย.) — โครงเดียวกับการ์ดคาดการณ์: หัวข้อ+ช่วงเวลา / คำระดับ / มม. / บรรทัดท้าย */
.fon-past{padding:22px 24px;gap:14px;flex:1;min-height:0}
.fon-past .fp-main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;margin:auto 0} /* ไอคอนใหญ่กลางการ์ด แล้วคำ/ตัวเลขเรียงกลาง · การ์ดยืดตามแถว → อยู่กลางที่ว่าง */
.fon-past .wh{font-size:var(--fs-sm);line-height:1.45}
.fon-past .win-t{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.3}
.fon-past .range{display:block;font-weight:500;opacity:.85}
.fon-past .wx{margin:0 0 4px}
.fon-past .wx svg{width:90%;height:90%} /* มือถือ app.css บีบกล่องไอคอนการ์ดหลักเหลือ 80px แต่ svg ยังกว้าง 119px ทับคำระดับ (เจอ 28 ก.ย.) → ให้ svg ย่อตามกล่อง */
.fp-row1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;font-size:var(--fs-sm);font-weight:600}
.fp-row1 .place{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600}
.fp-row1 .when{opacity:.9;white-space:nowrap}
.wt-note{font-weight:500;font-size:var(--fs-body);opacity:.9} /* "(คาดการณ์)" ต่อท้ายหัวการ์ดหลัก — แทนบรรทัด "ทั้งวันคาดว่า" (เจ้าของขอ 28 ก.ย.) */
.fp-word{font-family:var(--font-display);font-size:44px;font-weight:600;line-height:1.2;white-space:nowrap}
.fp-amt{font-family:var(--font-display);font-size:24px;font-weight:600;margin-top:2px}
.fp-amt small{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;opacity:.85}
.fp-agg{font-size:var(--fs-sm);font-weight:500;opacity:.9;margin-top:6px;line-height:1.5;max-width:34ch}
.fon-col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* ภาษาสีฝน (tokens.css): เกิดแล้ว = ฟ้าอมเขียวทึบ · คาดการณ์ = ฟ้า + เส้นประ */
.fon-col .hero-card{background:var(--obs-strong)}
.fon-fc{border:1.5px dashed var(--fc-line);background:var(--fc-soft);box-shadow:none;gap:10px;padding:18px 20px}
.fon-fc .fc-head{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);font-weight:500;line-height:1.45;color:var(--text-2)}
.fon-fc .fc-head .win-t{color:var(--text-1)}
.fon-fc .fc-head .range{font-weight:500;white-space:nowrap}
.g-legend{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);line-height:1.45}
.g-legend p{display:flex;align-items:center;gap:8px}
.g-legend p b{margin-left:auto;font-family:var(--font-display);font-weight:600;white-space:nowrap}
.g-legend .g-when{font-weight:600;color:var(--text-2)}
.g-legend .small{display:block;margin-top:4px}
.g-legend .g-total{border-top:1px solid var(--border-subtle);padding-top:6px;font-weight:600}
.g-legend .sw{width:14px;height:14px;border-radius:4px;flex:none}
.g-legend .sw.obs{background:var(--heat-3)}
.g-legend .sw.fc{background:var(--fc-soft);border:1.5px dashed var(--fc-line)}
.fon-gauge .rgauge{width:100%;max-width:250px;height:auto;align-self:center} /* เล็กลงจาก 300 ให้แถวการ์ดเตี้ยลง (เจ้าของขอ 28 ก.ย.) */
.page-note{font-size:var(--fs-sm);color:var(--text-3);margin-top:4px}
.fon-days .fday.fc.on{background:var(--fcr-1);border:2px solid var(--fcr-4);box-shadow:none;color:var(--text-1)}
.fon-days .fday.fc.on .lab{color:var(--fcr-4);font-weight:800}
/* แถบฝนทั้งวัน 07→07 (dayline): ตาราง 24 คอลัมน์ = ชั่วโมงละคอลัมน์ · แถว 1 = วงเล็บปีกกา · แถว 2 = ช่อง 3 ชม. */
.dayline{grid-column:1/-1;gap:12px}
.dl-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.dl-top .win-t{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.3}
.dl-top .range{display:block;font-size:var(--fs-sm);color:var(--text-2)}
.dl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px} /* จอแคบเลื่อนซ้าย-ขวาในการ์ด หน้าไม่เลื่อนแนวนอน */
.dl-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:0;row-gap:8px;min-width:720px}
.dl-grid .fday{min-width:0;height:auto;gap:4px;margin:0 4px;padding:14px 8px 16px;border-radius:999px;align-items:center;text-align:center} /* แคปซูลโค้งมน — แยกรายชั่วโมงออกจากการ์ดรายวัน (สี่เหลี่ยม) ในสัปดาห์นี้ (เจ้าของขอ 28 ก.ย.) */
.dl-grid .fday.fc{background:var(--fc-soft);border:1px solid var(--fcr-2)}
.dl-grid .fday.mix{background:linear-gradient(90deg,var(--obs-soft) 50%,var(--fc-soft) 50%);border:1px solid var(--fcr-2)}
.dl-grid .fday.on{border:2px solid var(--text-1);box-shadow:none;color:var(--text-1)}
.dl-grid .fday.on .lab{color:var(--text-1);font-weight:800}
.dl-grid .fday.on .p{color:var(--text-3)}
.dl-grid .fday.mix .wx{color:var(--fcr-4)}
/* วงเล็บปีกกา: เส้นบน + ขาสองข้าง + ป้ายตรงกลาง */
.brace{position:relative;margin:0 4px;height:30px;border:2px solid;border-bottom:0;border-radius:10px 10px 0 0;top:10px;display:flex;justify-content:center}
.brace span{position:relative;top:-13px;padding:0 8px;background:var(--surface-card);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;line-height:1.4}
.brace.obs{border-color:var(--heat-3);color:var(--heat-4)}
.brace.fc{border-color:var(--fcr-3);color:var(--fcr-4);border-style:dashed}
.fon-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.fon-days .fday{height:auto;min-width:0;gap:6px}

/* การ์ดหลัก + ถัง อยู่แถวเดียวกัน รายการสถานีขึ้นแถวใหม่เต็มกว้าง
   เดิมเริ่มที่ 900px — จอ 900–1180 (แท็บเล็ต/หน้าต่างครึ่งจอ) การ์ดรายการสถานีเหลือกว้าง ~100px ตัวหนังสือทีละคำ (เจอ 29 ก.ย. ที่ 1024px) */
@media (max-width:1180px){
  .fon-hero{grid-template-columns:minmax(0,1fr) 290px}
  .fon-hero > :last-child{grid-column:1/-1}
  .fon-hero > .st-card{grid-column:1/-1}
}
@media (max-width:900px){
  .fon-days{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .fon-hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* แถบเมนูย้ายไปติดล่างจอ (กฎ .rail ใน ../css/app.css) → เว้นที่ด้านล่าง */
  .fon-wrap{padding:calc(env(safe-area-inset-top,0px) + 20px) 12px calc(96px + env(safe-area-inset-bottom,0px));gap:18px}
  .fsec{padding:16px;border-radius:18px;gap:14px}
  .sec-head h2{font-size:19px}
  .fon-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* จอแคบ: ช่องเลือกเขตลงไปบรรทัดที่สองเต็มความกว้าง (ชื่อหัวข้อ + ⓘ อยู่บรรทัดแรก) */
  /* จอแคบ: ชื่อเว็บบรรทัดแรก · ช่องเลือกเขต + ปุ่มตำแหน่ง + ปุ่มมืด/สว่าง บรรทัดที่สองเต็มความกว้าง */
  .fon-top .top-act{flex-basis:100%;flex-wrap:wrap;justify-content:flex-end} /* มีช่องจังหวัดแล้ว แถวเดียวไม่พอ — ช่องเลือกเต็มแถว ปุ่มธีมลงบรรทัดถัดไป */
  /* จอแคบ: ปุ่มสูงสุด/เฉลี่ยลงบรรทัดใต้ชื่อหัวข้อ (หัวข้อ + ⓘ อยู่บรรทัดแรก) */
  .sec-head .agg-row{order:3;flex-basis:100%;justify-content:flex-start}
  .fon-logo .mark{height:40px} .fon-logo .word{height:28px} .fon-logo .word-text{font-size:24px}
  .fon-top #pickRow{flex:1 1 100%;min-width:0;flex-wrap:nowrap}
  .fon-top #pickRow select,.fon-top #pickRow input{flex:1 1 0;min-width:0;width:0} /* width:0 — select ไม่ยอมหดต่ำกว่าชื่อเขตที่ยาวที่สุด ดันปุ่มล้นขอบ */
  .fon-top #locate{width:44px;padding:0;justify-content:center;flex:none}
  .fon-top #locate .lbl{display:none}
}
/* dropdown ปีก่อนหน้า — สูงเท่าปุ่ม segmented ข้าง ๆ */
.inline-select{min-height:42px;padding:4px 10px;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface-field);color:var(--text-2);font-weight:600}
.sec-info .calc{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.sec-info .calc p{margin-top:4px;font-variant-numeric:tabular-nums}

/* แถบโหลดพร้อมกะเวลา (ปฏิทิน/รายเดือนโหมดทั้งเขต ดึงหลายจุดวัด × หลายเดือน) */
.loadbar{display:flex;flex-direction:column;gap:8px;padding:18px 4px}
.loadbar .lb-text{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2)}
.loadbar .lb-text .ic{animation:lbspin 1.2s linear infinite}
.loadbar .lb-track{height:6px;border-radius:3px;background:var(--chart-track);overflow:hidden}
.loadbar .lb-track i{display:block;height:100%;background:var(--heat-3);transition:width .2s}
@keyframes lbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loadbar .lb-text .ic{animation:none}}

/* ตัวควบคุมปฏิทิน: แหล่งข้อมูล (+ⓘ) / สถานี / ปี คนละบรรทัด */
.yr-ctl{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.yr-ctl > .row{min-width:0;max-width:100%}
.yr-ctl .inline-field{max-width:100%}
.yr-ctl .inline-field select,.yr-ctl .inline-select{max-width:100%;min-width:0;font-size:16px} /* ต่ำกว่า 16px iOS ซูมจอตอนแตะ */
.mini-info{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-2);display:grid;place-items:center;cursor:pointer;flex:none}
.mini-info[aria-expanded="true"]{background:var(--text-1);color:var(--surface-card);border-color:var(--text-1)}
.mini-pop{max-width:760px;display:flex;flex-direction:column;gap:8px;line-height:1.55}

/* ป้ายเตือนแดง: จังหวัดนอกกรุงเทพฯ ข้อมูลจุดวัดน้อยกว่า (เจ้าของขอ 28 ก.ย.) */
.prov-warn{flex-basis:100%;display:flex;align-items:flex-start;gap:8px;margin:4px 0 0;padding:10px 14px;border-radius:var(--r-md);background:var(--badbg);color:var(--bad);font-size:var(--fs-sm);line-height:1.55;border:1px solid var(--bad)}
.prov-warn[hidden]{display:none}
.prov-warn .ic{flex:none;margin-top:3px}

#province[hidden]{display:none}

/* รายการจุดวัด: สูงไม่เกินถังวัดฝนข้าง ๆ แล้วเลื่อนในการ์ด (อำเภอที่มี 20+ จุด) */
.st-rows{max-height:420px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
@media (max-width:560px){.st-rows{max-height:360px}}