/* =====================================================================
   ui.css — ธีมมินิมอล (ค่าเริ่มต้น) ของ NutriCompose · ดู DESIGN_TH.md
   ลิงก์หลัง <style> ใน index.html จึงทับกฎเดิมได้ · ธีมกระจก (glass.css) ใช้ selector
   ขึ้นต้น html.lg จึงยังทับไฟล์นี้ได้เมื่อผู้ใช้เปิดเอง
   หลัก: พื้นเรียบ · การ์ดทึบ+เส้นบาง · ไม่มีเงา/ไล่สี · สีหลักสีเดียว · ไอคอนเส้น
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  /* ขนาดตัวอักษร 5 ระดับ */
  --fs-title:24px; --fs-head:17px; --fs-body:16px; --fs-small:13px; --fs-tiny:11.5px;
  /* ระยะห่าง */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  /* มุมโค้ง */
  --r-card:14px; --r-ctl:10px; --r-pill:999px;
}

body{font-size:var(--fs-body)}

/* ---------- หัวหน้า ---------- */
.hd h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.01em}
.hd .sub{font-size:var(--fs-small);color:var(--ink-3)}
/* คำบรรยายคงที่ซ่อน (เหลือเฉพาะที่มี id = ข้อความเปลี่ยนตามสถานะ เช่น #dSub #pSub) */
.hd .sub:not([id]){display:none}

/* ---------- หัวหมวด ---------- */
.sec{margin-top:var(--sp-5)}
.sec h3{font-size:var(--fs-small);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);margin:0 0 var(--sp-2)}

/* ---------- การ์ด/รายการ ---------- */
.card,.list{border-radius:var(--r-card)}
.note{font-size:var(--fs-small)}

/* ---------- ปุ่ม ---------- */
.btn{border-radius:var(--r-ctl)}
.btn.ghost{border:1px solid var(--line-strong)}
.chip{font-size:var(--fs-small)}
.editbtn{border-radius:var(--r-ctl)}

/* ---------- ตัวสลับมุมมอง (.seg) แบบเดียวทั้งแอป ---------- */
.seg{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:var(--r-ctl);max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{white-space:nowrap;min-width:max-content;min-height:36px;padding:7px 12px;font-size:var(--fs-small)}
.seg button.on{font-weight:600}

/* ---------- แถบแท็บล่าง ---------- */
.tab{font-size:var(--fs-tiny)}

/* ---------- ไอคอนเส้น (ใช้ผ่าน icon('ชื่อ') ใน index.html) ---------- */
.ic{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.btn .ic,.addbtn .ic,.chip .ic{margin-right:6px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);min-width:var(--tap);
  border:0;background:none;color:var(--accent);cursor:pointer;border-radius:var(--r-ctl);padding:0 10px}

/* ---------- ไดอารี่ (U2) ---------- */
.seg.fill button{flex:1 0 auto}
.seg.mb{margin-bottom:var(--sp-3)}
.coach .cmore{align-self:flex-start}
/* การ์ดหลักของวัน: วงแหวน + แถบสารอาหารหลักในใบเดียว */
.dmain{padding:var(--sp-3) var(--sp-4) var(--sp-1)}
.dmain .dsum{background:none;border:0;border-radius:0;padding:0 0 var(--sp-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.dmain .dsum::before{content:none}
.dmain-bars{border-top:1px solid var(--line);margin-top:var(--sp-1)}
/* หัวมื้อ: ชื่อ · kcal · ปุ่ม ＋ */
.dmeal-hd{display:flex;align-items:center;gap:var(--sp-2)}
.dmeal-name{flex:1}
.dmeal-kcal{font-weight:400;color:var(--ink-3)}
.dmeal-hd .iconbtn{margin-right:-10px}
.dmeal-hd + .list{margin-top:0}
.dmore{margin-top:var(--sp-5)}
.dmore .sec:first-child{margin-top:0}

/* ---------- ฐานข้อมูลอาหาร (U3) ---------- */
.findbar{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
.findbar .search{flex:1;min-width:0;margin:0}
.search .iconbtn{min-height:36px;min-width:36px;padding:0 6px;margin-right:-6px}
.btn.addopen{width:auto;flex:none;padding:0 var(--sp-4)}
.btn.sm{width:auto;min-width:0;padding:6px 10px;font-size:var(--fs-small);min-height:0}
.mt6{margin-top:6px}
/* bottom sheet: พื้นตามธีม (เดิมใช้ --bg ที่ไม่มี → ขาวใน dark) */
.dsheet-in{background:var(--surface)}
.dsheet-hd{margin-bottom:var(--sp-2)}
.sheetopt{display:flex;justify-content:flex-start;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:none;color:var(--ink);font-weight:500;font-size:var(--fs-body);padding:var(--sp-3) var(--sp-4);text-align:left}
.sheetopt:last-child{border-bottom:0}
.sheetopt:active{background:var(--surface-2);color:var(--ink)}

/* ---------- ตั้งค่า / Personal / บริการ (U4) ---------- */
.row-ic{color:var(--ink-3);width:20px;height:20px;margin-right:0}
.row-ic + .row-main{margin-left:0}
.tgl{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-family:var(--font)}
.tgl input{transform:scale(1.3);margin:0 4px}
#logout{margin-top:var(--sp-5)}
.btn .ic:only-child{margin-right:0}
/* ปุ่มเพิ่มในหน้ารายการ (ask/booking/care/equipment): เต็มความกว้าง เว้นระยะเท่ากัน */
.btn.ghost.tall{margin-top:var(--sp-3)}

/* ---------- แต่งตัว (U5) ---------- */
.flabel{display:block;font-size:var(--fs-small);font-weight:600;color:var(--ink-3);margin-bottom:6px}
.xbadge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;border:0;border-radius:50%;
  width:16px;height:16px;font-size:11px;line-height:16px;padding:0;cursor:pointer}