/* ---------------------------------------------------------------------------
   MetS Web App — CSS เสริมจาก Tailwind
   Tailwind Play CDN ไม่ประมวลผล @apply ในไฟล์ภายนอก จึงเขียนเป็น CSS ธรรมดา
   คลาสในไฟล์นี้ใช้กับองค์ประกอบที่ซ้ำบ่อย เพื่อลดความยาวของ class ใน HTML
--------------------------------------------------------------------------- */

:root {
  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;

  /* ไล่เฉดสีหลัก — ใช้ซ้ำทุกที่เพื่อให้ทั้งแอปดูเป็นชุดเดียวกัน */
  --grad-brand:      linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  --grad-brand-deep: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, #f0fdf9 0%, var(--brand-50) 100%);
}

html { -webkit-text-size-adjust: 100%; }

/* กันไอคอนบานเต็มการ์ดเมื่อคลาสกำหนดขนาดสะกดผิดหรือไม่มีจริงใน Tailwind
   (จำกัดเฉพาะไอคอนจาก icon() เท่านั้น ไม่กระทบวงแหวนคะแนนและกราฟ SVG) */
.mets-icon {
  flex-shrink: 0;
  max-width: 2.5rem;
  max-height: 2.5rem;
}

body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ปิดลูกศรเพิ่ม/ลดของ input[type=number] เพื่อให้พื้นที่กดบนมือถือกว้างขึ้น */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* --- แถบหัวเรื่องและเมนูล่าง ---------------------------------------------- */
.app-header {
  background: var(--grad-brand-deep);
  position: relative;
}
/* แสงจาง ๆ มุมขวาบนเพื่อให้ไล่เฉดดูมีมิติขึ้น ไม่แบน */
.app-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 85% 0%, rgba(255, 255, 255, .18), transparent 60%);
  pointer-events: none;
}
.app-header > * { position: relative; z-index: 1; }

/* เมนูล่างเป็น "แคปซูลลอย" ไม่ใช่แถบทึบติดขอบจอ
   ตัว <nav> เป็นแค่กรอบโปร่งใสสำหรับจัดตำแหน่ง ส่วนพื้นขาวอยู่ที่ .navbar
   เพราะปุ่มวงกลมตรงกลางต้องลอยพ้นขอบบนของแคปซูลออกมา ซึ่งทำไม่ได้ถ้าพื้นอยู่ที่ <nav> */
.app-nav {
  padding: 0 .875rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: none;   /* ช่องว่างสองข้างแคปซูลต้องกดทะลุไปโดนเนื้อหาได้ */
}

/* ที่ว่างท้ายเนื้อหาให้แคปซูลเมนู — ใช้ที่ <main> ของ pages/layout.php
 *
 * **ต้องบวก env(safe-area-inset-bottom) ด้วย ห้ามใช้ค่าคงที่อย่าง pb-32 ของ Tailwind**
 *
 * เพราะ .app-nav ด้านบนบวก safe area เข้าไปใน padding ของตัวเอง แคปซูลจึง "สูงขึ้น"
 * บนเครื่องที่มีแถบ home indicator แล้วขอบบนของมันขยับขึ้นมาทับท้ายเนื้อหา
 * ถ้าที่ว่างด้านล่างไม่โตตามไปด้วยเท่ากัน
 * (กับดักเดียวกับ .kcal-fab-space ของหน้าบันทึกประจำวัน ซึ่งเจอปัญหานี้มาก่อน)
 *
 * ตัวจำลองของ DevTools ไม่มี env(safe-area-inset-*) ให้ จึงวัดแล้วไม่พบปัญหา —
 * ผู้ใช้แจ้งมาจากเครื่องจริง (ส.ค. 2569) วัดซ้ำโดยยัดค่า safe area เข้าไปเองแล้วพบว่า
 * เนื้อหาถูกทับ 11-20px ทุกหน้า ทั้งที่ตอน safe area = 0 ยังเหลือช่องว่าง 14-23px
 *
 * 9rem แทน 8rem เดิม เพื่อให้เหลือช่องว่างใต้การ์ดสุดท้ายราว 30px แทนที่จะเป็น 14px
 * ซึ่งชิดจนดูเหมือนเนื้อหาถูกตัด แม้ในทางเทคนิคจะยังไม่ทับ
 *
 * **ต้องเขียนเป็น `main.main-nav-space` ไม่ใช่ `.main-nav-space` เฉย ๆ**
 * เพราะ Tailwind Play CDN แทรก <style> ของตัวเองเข้ามา *หลัง* ไฟล์นี้
 * คลาส `py-4` ที่อยู่บน <main> ตัวเดียวกันจึงชนะเมื่อความจำเพาะเท่ากัน
 * แล้ว padding-bottom กลับไปเป็น 16px เงียบ ๆ (วัดได้ตอนแก้ครั้งแรก — เนื้อหาถูกทับ 98px)
 * การเติมชื่อ element ทำให้ความจำเพาะสูงกว่าหนึ่งขั้น จึงชนะโดยไม่ต้องใช้ !important
 */
main.main-nav-space { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }
.app-nav > * { pointer-events: auto; }

/* ม่านไล่เฉดหลังแคปซูล — แถบลอยจึงมีช่องว่างสองข้างและด้านล่างให้เนื้อหาเลื่อนผ่าน
   ถ้าไม่มีม่านนี้ ตัวหนังสือจะโผล่ครึ่งบรรทัดอยู่ข้างแคปซูลแล้วดูเหมือนหน้าเสีย
   z-index ติดลบทำให้อยู่หลังแคปซูลแต่ยังบังเนื้อหา เพราะ .app-nav เป็น stacking context อยู่แล้ว */
.app-nav::before {
  content: "";
  position: absolute;
  inset: -1.5rem 0 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0) 0%, var(--slate-50) 55%);
  pointer-events: none;
}

.navbar {
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .13), 0 2px 6px rgba(15, 23, 42, .05);
}

/* 5 ช่องเท่ากัน โดยช่องกลางเว้นว่างไว้ให้ปุ่มวงกลมลง
   ใช้จำนวนช่องคงที่ ไม่ใช่ auto-fit เพื่อให้ปุ่มกลางตรงกับกึ่งกลางแคปซูลพอดีเสมอ */
.navbar-row { display: grid; grid-template-columns: repeat(5, 1fr); }

.nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .125rem;
  min-height: 66px;
  padding: .5rem .125rem 0;
  color: var(--slate-400);
  transition: color .15s;
}
.nav-link:hover { color: var(--slate-500); }

.nav-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 1.5rem;
  transition: color .18s;
}

/* จุดบอกตำแหน่งใต้ไอคอน — บอกด้วยรูปทรงคู่กับสี เผื่อผู้ใช้ตาบอดสีเขียว-แดง
   ตัวหนังสือกำกับเมนูอยู่ใต้จุดนี้อีกชั้น */
.nav-dot {
  width: .3125rem;
  height: .3125rem;
  border-radius: 999px;
  background: transparent;
  transition: background-color .18s;
}

/* คำกำกับใต้ไอคอน — ใช้ px คงที่ ไม่คูณ --text-scale
   เพราะช่องกว้างแค่ 1 ใน 5 ของจอ ถ้าโตตามขนาดตัวอักษรจะตัดคำหรือดันแถบจนสูงเกิน
   (ชื่อเมนูสั้นและอยู่คู่ไอคอนอยู่แล้ว จึงไม่ใช่ข้อความที่ต้องอ่านยาว ๆ) */
.nav-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-link.is-active { color: var(--brand-600); }
.nav-link.is-active .nav-dot { background: var(--brand-500); }
.nav-link.is-active .nav-label { font-weight: 600; }

/* คำกำกับของปุ่มกลาง วางที่ก้นช่องให้อยู่ระดับเดียวกับคำอื่น
   ทั้งช่องและลิงก์ข้างในต้องเป็น flex + justify-content: center ทั้งคู่
   เพราะ .nav-label เป็น inline — ถ้าลิงก์เป็น block เฉย ๆ คำจะไปชิดซ้ายของช่อง
   แล้วเยื้องออกจากปุ่มวงกลมมากขึ้นเรื่อย ๆ ตามความกว้างจอ (จอ 430px เยื้องถึง 28px)
   ส่วนอีก 4 ปุ่มไม่เจอปัญหานี้เพราะ .nav-link เป็น flex column ที่ align-items: center อยู่แล้ว */
.nav-gap { display: flex; align-items: flex-end; justify-content: center; }
.nav-gap-link {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: .5rem;
  color: var(--slate-400);
  transition: color .15s;
}
.nav-gap-link.is-active { color: var(--brand-600); }
.nav-gap-link.is-active .nav-label { font-weight: 600; }

/* ปุ่มวงกลมกลางแถบ — ยกขึ้นให้พ้นขอบบนของแคปซูล
   translate ทั้งสองแกนพร้อมกัน จึงยังอยู่กึ่งกลางแม้แคปซูลกว้างเท่าไร
   ค่า -52% เลือกให้ก้นปุ่มอยู่เหนือคำกำกับพอดี ไม่ทับตัวหนังสือ */
.nav-fab {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -52%);
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: var(--grad-brand-deep);
  color: #fff;
  box-shadow: 0 10px 24px rgba(5, 150, 105, .42);
  transition: transform .15s, box-shadow .15s;
}
.nav-fab:active { transform: translate(-50%, -52%) scale(.94); }
.nav-fab.is-active { box-shadow: 0 0 0 4px rgba(16, 185, 129, .22), 0 10px 24px rgba(5, 150, 105, .42); }

/* --- การ์ด ---------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card + .card { margin-top: .75rem; }

/* การ์ดที่มีแถบไล่เฉดบาง ๆ ด้านซ้าย ใช้เน้นส่วนสำคัญโดยไม่ต้องใส่สีทั้งใบ */
.card-accent {
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-brand);
}

.card-title {
  font-size: calc(.9375rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: .01em;
  margin: 1.25rem 0 .5rem;
}
.section-title svg { flex: 0 0 auto; }

/* --- ฟอร์ม ---------------------------------------------------------------- */
.field { margin-bottom: .875rem; }

.label {
  display: block;
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 500;
  color: var(--slate-700);
  margin-bottom: .375rem;
}
.label .req { color: #dc2626; margin-left: .125rem; }

.hint {
  font-size: calc(.6875rem * var(--text-scale));
  color: var(--slate-400);
  margin-top: .25rem;
  line-height: 1.4;
}

/* ── ตัวอักษรในช่องกรอกห้ามต่ำกว่า 16px เด็ดขาด ──────────────────────────────
   Safari บน iOS "ซูมเข้าหาช่อง" ทันทีที่โฟกัสช่องกรอกที่ตัวอักษรเล็กกว่า 16px
   แล้ว **ไม่ซูมกลับให้เมื่อออกจากช่อง** ทั้งหน้าจึงค้างอยู่ที่ระยะซูมนั้นต่อไป
   จนกว่าผู้ใช้จะถ่างนิ้วย่อกลับเอง — แถบหัวเรื่องกับแคปซูลเมนูล่างหลุดขอบจอ
   และเนื้อหาล้นออกทางขวา ดูเหมือนหน้าเว็บพัง (ผู้ใช้แจ้งมา)
   เดิมตั้งไว้ .9375rem = 15px ซึ่งต่ำกว่าเกณฑ์อยู่ 1px พอดี

   ใช้ max() ไม่ใช่เขียน 1rem เฉย ๆ เพราะ rem อ้างอิงขนาดตัวอักษรเริ่มต้น
   ของเบราว์เซอร์ ผู้ใช้ที่ตั้งค่านั้นให้เล็กกว่าปกติจะได้ค่าต่ำกว่า 16px
   แล้วอาการกลับมาอีกโดยที่โค้ดยัง "ดูเหมือนถูก" อยู่

   > ทางแก้ที่ห้ามใช้: เติม `maximum-scale=1` / `user-scalable=no` ลง viewport
   > นั่นคือการปิดการถ่างนิ้วซูมของทั้งเว็บ ซึ่งผู้ใช้กลุ่มผู้สูงอายุใช้จริง
   > และผิดเกณฑ์การเข้าถึง WCAG 1.4.4 · ที่นี่แก้ที่ต้นเหตุแทน คือทำให้
   > เบราว์เซอร์ไม่มีเหตุต้องซูมตั้งแต่แรก

   ปุ่มและช่องติ๊กไม่ต้องสนใจกฎนี้ — iOS ซูมเฉพาะช่องที่พิมพ์ข้อความได้
   (input ที่ไม่ใช่ checkbox/radio · select · textarea) */
.input, .select, textarea.input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: .625rem .75rem;
  font-size: max(16px, calc(1rem * var(--text-scale)));
  color: var(--slate-800);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.input::placeholder { color: #cbd5e1; }
.input:disabled, .input[readonly] { background: #f8fafc; color: var(--slate-500); }

.input-error { border-color: #ef4444 !important; }
.error-text { font-size: calc(.75rem * var(--text-scale)); color: #dc2626; margin-top: .25rem; }
/* ช่อง error ที่เรนเดอร์ไว้ล่วงหน้าให้ JS เติมข้อความ ตอนว่างต้องไม่กินที่ */
.error-text:empty { display: none; }

.input-group { display: flex; align-items: stretch; gap: .5rem; }

/* ── ช่องวันที่และเวลา — ทุกช่องในระบบ ────────────────────────────────────────
   `input[type=date]` ไม่ใช่กล่องข้อความธรรมดา แต่เป็น **ตัวควบคุมของระบบปฏิบัติการ**
   มัน "มีความกว้างในตัว" ที่กว้างกว่าที่คิด และเบราว์เซอร์บนมือถือหลายตัว
   **ไม่ยอมหดตาม width / min-width ของกล่องที่ครอบอยู่** ช่องจึงดันล้นออกนอกการ์ดทางขวา
   ทั้งที่ช่องข้อความข้าง ๆ (ชื่อ-สกุล · เบอร์โทร) พอดีกรอบทุกช่อง

   iOS วางค่าไว้ในกล่องลูก `::-webkit-date-and-time-value` ซึ่งมีความกว้างของตัวเอง
   และจัดกึ่งกลาง — กล่องลูกนั้นคือตัวที่ดันความกว้างของ input จนล้น ไม่ใช่ตัว input เอง
   จึงต้องปิด appearance เดิมก่อน แล้วบังคับความกว้างของกล่องลูกด้วย

   > **กฎนี้เคยผูกไว้กับ `.daterange` ของหน้าความก้าวหน้าที่เดียว**
   > ทั้งที่ทั้งระบบมีช่องวันที่/เวลาอยู่ 24 ช่อง — อีก 22 ช่องจึงยังล้นอยู่เงียบ ๆ
   > จนผู้ใช้แจ้งมาจากหน้าโปรไฟล์ (ส.ค. 2569) ตอนนี้ผูกกับ `[type=...]` โดยตรง
   > ช่องใหม่ที่เพิ่มภายหลังจึงได้กฎนี้ไปเองโดยไม่ต้องมีใครจำ

   บั๊กนี้มองไม่เห็นจากเดสก์ท็อปและตัวจำลองของ DevTools ซึ่งใช้ช่องวันที่ของ
   Chrome เดสก์ท็อป ไม่ใช่ของระบบปฏิบัติการจริง — **ต้องให้คนเปิดบนมือถือจริงยืนยัน** */
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"],
.input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
/* กล่องค่าข้างในของ WebKit — ต้นเหตุที่ทำให้ช่องไม่ยอมหดบน iOS */
.input[type="date"]::-webkit-date-and-time-value,
.input[type="time"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value,
.input[type="month"]::-webkit-date-and-time-value {
  width: 100%;
  margin: 0;
  text-align: left;
}
/* ไอคอนปฏิทินของเบราว์เซอร์ต้องไม่ถูกบีบจนหาย และต้องไม่ดันความกว้างของช่อง */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.input[type="month"]::-webkit-calendar-picker-indicator { flex-shrink: 0; margin-left: auto; }

/* ── ตัวเลือกช่วงวันที่ (หน้าความก้าวหน้า) ──
   ต่อยอดจากกฎช่องวันที่ด้านบนอีกสองชั้น ซึ่งเป็นเรื่องของ "การวาง" ไม่ใช่ตัวช่อง:
     1. เรียงลงมาคอลัมน์เดียวเสมอ — ช่องจึงกว้างเท่ากับปุ่ม "ดูข้อมูลตามช่วงนี้" พอดี
        ไม่มีกรณีสองช่องเบียดกันให้ต้องเดาว่าแคบพอหรือยัง
     2. `minmax(0, 1fr)` แทน `1fr` — `1fr` มีขนาดต่ำสุดเป็น `auto` ซึ่งไม่ยอมหด
        ต่ำกว่าความกว้างในตัวของช่อง

   **ห้ามใช้ `calc()` ใน shorthand `flex` กับบล็อกนี้** Safari หลายรุ่นทิ้งทั้งบรรทัด
   แล้วช่องกลับไปกว้างตามเนื้อหาจนล้นเหมือนเดิม (เคยเขียนแล้วผู้ใช้แจ้งว่ายังล้นอยู่) */
.daterange { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; }
.daterange > .field { min-width: 0; margin-bottom: 0; }
.daterange-note {
  display: flex;
  align-items: flex-start;
  gap: .3125rem;
  margin-top: .625rem;
  font-size: calc(.6875rem * var(--text-scale));
  line-height: 1.55;
  color: var(--slate-400);
}
.daterange-note b { font-weight: 600; color: var(--slate-500); }

/* ── แถบสรุปช่วงเวลาที่กำลังดู + หน้าต่างเลือกช่วง (หน้าความก้าวหน้า) ──
   มติกรรมการ ส.ค. 2569 — เดิมกล่องเลือกช่วงเป็นการ์ดบนสุดของหน้า ผู้ใช้สูงอายุ
   เลื่อนผ่านไปดูกราฟโดยไม่ทันสังเกตว่าเลือกช่วงเวลาได้ จึงให้เด้งขึ้นมาก่อนเห็นข้อมูล

   `.rangepop` เปล่า ๆ คือการ์ดธรรมดา — เป็นสภาพที่ HTML ส่งมาและเป็นสภาพเมื่อปิด JS
   จะกลายเป็นม่านก็ต่อเมื่อสคริปต์เติม `.rangepop-js` ให้ **ห้ามสลับลำดับนี้**
   (ถ้าซ่อนไว้ใน HTML ตั้งแต่แรกแล้วให้ JS มาเปิด คนที่ปิด JS จะเลือกช่วงเวลาไม่ได้เลย) */
.rangebar {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin-top: 0;
  padding: .875rem 1rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.rangebar-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  background: var(--grad-brand);
  border-radius: .75rem;
}
.rangebar-text { flex: 1; min-width: 0; }
.rangebar-label { display: block; font-size: calc(.6875rem * var(--text-scale)); color: var(--slate-400); }
.rangebar-value {
  display: block;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 700;
  line-height: 1.4;
  color: var(--slate-800);
}
.rangebar-sub { display: block; font-size: calc(.6875rem * var(--text-scale)); color: var(--slate-500); }
.rangebar-edit {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
  padding: .375rem .625rem;
  font-size: calc(.75rem * var(--text-scale));
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: .625rem;
}

.rangepop { margin-top: .75rem; }
.rangepop .rangepop-backdrop { display: none; }
.rangepop .rangepop-head { display: none; }

/* ตั้งแต่บรรทัดนี้ลงไปคือสภาพ "เป็นม่าน" ซึ่งมีเฉพาะเมื่อ JS ทำงาน */
.rangepop-js { position: fixed; inset: 0; z-index: 60; display: none; margin-top: 0; }
.rangepop-js.is-open { display: block; }
.rangepop-js .rangepop-backdrop {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}
.rangepop-js .rangepop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.rangepop-js .rangepop-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  max-width: 26rem;
  /* จอเตี้ยมาก (แนวนอน) ต้องเลื่อนอ่านในหน้าต่างได้ ไม่ใช่ปุ่มบันทึกหลุดพ้นจอ */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.rangepop-x {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--slate-400);
  background: #f1f5f9;
  border-radius: .625rem;
}
.input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 .75rem;
  font-size: calc(.8125rem * var(--text-scale));
  color: var(--slate-500);
  background: #f1f5f9;
  border: 1px solid var(--slate-300);
  border-radius: .75rem;
  white-space: nowrap;
}

/* --- ตัวเลือกแบบ 2 ปุ่ม (ใช่/ไม่ใช่, ชาย/หญิง) ---------------------------- */
.segmented { display: flex; gap: .5rem; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
/* รับทั้ง label (คู่กับ radio) และ a (สลับโหมดด้วยลิงก์ เช่นหน้าเข้าสู่ระบบหลังบ้าน
   ซึ่งต้องสลับได้แม้ปิด JS และเปิดตรงด้วย ?mode= ได้) */
.segmented label,
.segmented a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 46px;
  padding: .5rem .75rem;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 500;
  color: var(--slate-700);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: .75rem;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: all .15s;
}
.segmented input:checked + label,
.segmented a.is-on {
  background: var(--grad-brand);
  border-color: var(--brand-600);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(5, 150, 105, .25);
}
.segmented input:focus-visible + label,
.segmented a:focus-visible { box-shadow: 0 0 0 3px rgba(16, 185, 129, .3); }

/* --- checkbox แบบการ์ด ---------------------------------------------------- */
.check-card {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 46px;
  padding: .5rem .75rem;
  font-size: calc(.875rem * var(--text-scale));
  border: 1px solid var(--slate-300);
  border-radius: .75rem;
  background: #fff;
  cursor: pointer;
}
.check-card input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand-600); flex-shrink: 0; }
.check-card:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }

/* --- ขนาดตัวอักษรที่ผู้ใช้ปรับเองได้ ----------------------------------------
   ผู้เข้าร่วมวิจัยส่วนใหญ่เป็นผู้ใหญ่และผู้สูงอายุ ตัวอักษรตั้งต้น 9–15px เล็กเกินไป

   ทุก font-size ในไฟล์นี้คูณด้วย --text-scale และคลาสขนาดแบบ px ที่หน้าเพจใช้
   (text-[13px] ฯลฯ) ถูก override ด้านล่างให้คูณด้วยตัวเดียวกัน ขนาดจึงโตพร้อมกันทั้งแอป

   **ตั้งใจไม่แตะ font-size ของ :root** เพราะ rem ในไฟล์นี้คุมระยะห่างและความสูงด้วย
   ถ้าขยาย root ข้อความจะถูกคูณสองชั้น (rem โตแล้วยังคูณ --text-scale ซ้ำ) และระยะห่าง
   จะบานจนล้นจอแคบ · ปุ่มและช่องกรอกมี min-height เป็น px (46–48px) อยู่แล้ว
   จึงยังกดง่ายโดยไม่ต้องขยายระยะห่างตาม

   ใช้ calc() แทนการเขียนตัวเลขใหม่ทุกระดับ จึงเพิ่มระดับใหม่ได้โดยแก้ที่เดียว */
:root { --text-scale: 1; }
html[data-text-size="lg"] { --text-scale: 1.18; }
html[data-text-size="xl"] { --text-scale: 1.38; }

html[data-text-size] .text-\[9px\]    { font-size: calc(9px    * var(--text-scale)); }
html[data-text-size] .text-\[9\.5px\] { font-size: calc(9.5px  * var(--text-scale)); }
html[data-text-size] .text-\[10px\]   { font-size: calc(10px   * var(--text-scale)); }
html[data-text-size] .text-\[10\.5px\]{ font-size: calc(10.5px * var(--text-scale)); }
html[data-text-size] .text-\[11px\]   { font-size: calc(11px   * var(--text-scale)); }
html[data-text-size] .text-\[11\.5px\]{ font-size: calc(11.5px * var(--text-scale)); }
html[data-text-size] .text-\[12px\]   { font-size: calc(12px   * var(--text-scale)); }
html[data-text-size] .text-\[12\.5px\]{ font-size: calc(12.5px * var(--text-scale)); }
html[data-text-size] .text-\[13px\]   { font-size: calc(13px   * var(--text-scale)); }
html[data-text-size] .text-\[13\.5px\]{ font-size: calc(13.5px * var(--text-scale)); }
html[data-text-size] .text-\[14px\]   { font-size: calc(14px   * var(--text-scale)); }
html[data-text-size] .text-\[15px\]   { font-size: calc(15px   * var(--text-scale)); }
html[data-text-size] .text-\[17px\]   { font-size: calc(17px   * var(--text-scale)); }
html[data-text-size] .text-\[26px\]   { font-size: calc(26px   * var(--text-scale)); }


/* --- บัตรสุขภาพในหน้าโปรไฟล์ ------------------------------------------------
   วางเลย์เอาต์แบบบัตรรับรอง: ชื่อแอปมุมบนซ้าย · ระดับความเสี่ยงมุมบนขวา
   · ชื่อผู้ถือบัตร · คะแนนในวงแหวน · ค่าประจำตัวด้านข้าง · วันที่ประเมินท้ายบัตร

   สีเปลี่ยนตามระดับความเสี่ยงผ่านตัวแปร --hc-* ที่กำหนดในคลาส .hcard-low/-moderate/-high
   จึงอ่านสถานะได้จากสีก่อนอ่านตัวหนังสือ ซึ่งสำคัญกับผู้ใช้สูงอายุ */
.hcard {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 1rem 1.125rem .875rem;
  border-radius: 1.125rem;
  color: #fff;
  background: var(--hc-bg);
  box-shadow: 0 10px 26px var(--hc-shadow);
}
.hcard-low      { --hc-bg: linear-gradient(135deg, #047857 0%, #10b981 100%); --hc-shadow: rgba(4,120,87,.32); }
.hcard-moderate { --hc-bg: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); --hc-shadow: rgba(180,83,9,.30); }
.hcard-high     { --hc-bg: linear-gradient(135deg, #9f1239 0%, #ef4444 100%); --hc-shadow: rgba(159,18,57,.30); }
.hcard-empty    { --hc-bg: linear-gradient(135deg, #475569 0%, #94a3b8 100%); --hc-shadow: rgba(71,85,105,.26); }

/* ลายวงกลมจาง ๆ มุมขวาบน ให้บัตรดูมีมิติแบบบัตรจริง ไม่แบนเป็นสี่เหลี่ยมสีเดียว */
.hcard::after {
  content: "";
  position: absolute;
  top: -3.5rem;
  right: -2.5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}
.hcard > * { position: relative; z-index: 1; }

.hcard-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hcard-brand {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .85);
}
.hcard-chip {
  padding: .1875rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: calc(.625rem * var(--text-scale));
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.hcard-name {
  margin-top: .875rem;
  font-size: calc(1.0625rem * var(--text-scale));
  font-weight: 700;
  line-height: 1.3;
}
.hcard-meta {
  margin-top: .125rem;
  font-size: calc(.6875rem * var(--text-scale));
  color: rgba(255, 255, 255, .8);
}

.hcard-body { display: flex; align-items: center; gap: .875rem; margin-top: .875rem; }

.hcard-score { position: relative; flex-shrink: 0; width: 4.25rem; height: 4.25rem; }
.hcard-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hcard-ring-bg { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 6; }
.hcard-ring-fg { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.hcard-score-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(1.375rem * var(--text-scale));
  font-weight: 800;
  line-height: 1;
}

.hcard-facts { min-width: 0; flex: 1; }
.hcard-risk  { font-size: calc(.9375rem * var(--text-scale)); font-weight: 700; }
.hcard-count { margin-top: .0625rem; font-size: calc(.75rem * var(--text-scale)); color: rgba(255,255,255,.85); }

.hcard-vitals { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .5rem; }
.hcard-vitals li {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  font-size: calc(.6875rem * var(--text-scale));
}
.hcard-vitals span { color: rgba(255, 255, 255, .7); }
.hcard-vitals b    { font-weight: 700; }

.hcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .875rem;
  padding-top: .625rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: calc(.6875rem * var(--text-scale));
  color: rgba(255, 255, 255, .85);
}
.hcard-more { display: inline-flex; align-items: center; gap: .125rem; font-weight: 600; }

.hcard-empty-note {
  margin-top: .5rem;
  padding-bottom: .375rem;
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
}

/* กรอบครอบบัตรสำหรับหน้าจอกว้าง (ระบบหลังบ้าน) — ในแอปมือถือบัตรกว้างเท่าหน้าจออยู่แล้ว
   แต่บนเดสก์ท็อปถ้าปล่อยให้ยืดเต็มคอลัมน์ จะไม่เหลือเค้าของ "บัตร" ให้ดูออก */
.hcard-frame { width: 100%; }
@media (min-width: 640px) {
  .hcard-frame { width: 21rem; }
}
/* --- ปุ่มขยายตัวอักษรบนแถบหัวเรื่อง ----------------------------------------
   แผงเลือกเปิดใต้ปุ่ม ไม่ต้องเข้าหน้าโปรไฟล์ · ตัวอย่าง "ก ข" ในแต่ละปุ่ม
   ใช้ขนาด px ตายตัว จึงไม่โตตาม --text-scale — ต้องคงที่เพื่อให้เทียบกันได้ */
.ts-wrap { position: relative; flex-shrink: 0; }

.ts-pop {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 40;
  width: 11.5rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: .875rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  animation: ts-pop-in .14s ease-out;
}
@keyframes ts-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ts-pop[hidden] { display: none; }

.ts-pop-title {
  padding: .125rem .375rem .375rem;
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-400);
}

.ts-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  padding: .375rem .5rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--slate-700);
  cursor: pointer;
}
.ts-opt:hover { background: var(--slate-50); }
.ts-opt:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.ts-opt.is-on { background: var(--brand-50); color: var(--brand-800); }

.ts-opt-sample {
  flex-shrink: 0;
  width: 2.25rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.ts-opt-label { flex: 1; font-size: calc(.8125rem * var(--text-scale)); font-weight: 500; }
.ts-opt-check { flex-shrink: 0; color: var(--brand-600); opacity: 0; }
.ts-opt.is-on .ts-opt-check { opacity: 1; }

/* ตัวเลือกขนาดตัวอักษรในหน้าโปรไฟล์ — ตัวอย่างในปุ่มแสดงขนาดจริงของแต่ละระดับ */
.textsize-opt   { display: flex; flex-direction: column; align-items: center; gap: .125rem; }
.textsize-opt b { font-weight: 700; line-height: 1; }
.textsize-opt small { font-size: calc(.6875rem * var(--text-scale)); font-weight: 500; }

/* --- หน้าวิธีใช้แอป -------------------------------------------------------- */
.help-step-head { display: flex; align-items: center; gap: .5rem; }
.help-no {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 700;
}
.help-title {
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 700;
  color: var(--slate-800);
  line-height: 1.4;
}
.help-step-body { display: flex; gap: .875rem; margin-top: .75rem; align-items: flex-start; }
.help-shot {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: auto;
  /* ภาพจำลองหน้าจอ ไม่ควรยืดตามความกว้างการ์ดจนดูเทอะทะ */
}
.help-text {
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.75;
  color: var(--slate-700);
}

/* จอแคบมาก วางภาพไว้บนข้อความแทนการวางเคียงกัน */
@media (max-width: 360px) {
  .help-step-body { flex-direction: column; align-items: center; }
  .help-shot { flex: 0 0 auto; width: 8.5rem; }
}

/* --- การ์ดเตือนบันทึกประจำวันบนหน้าแรก -------------------------------------
   margin-top ต้องอยู่ที่ตัวการ์ดเอง ไม่ใช่ฝากไว้กับสิ่งที่อยู่เหนือมัน — เดิมไม่มี จึงติดกับ
   การ์ดข้อความแนะนำ ("สุขภาพเกณฑ์คงที่" ฯลฯ) และปุ่ม "เริ่มประเมิน" เป็นก้อนเดียว (ผู้ใช้แจ้ง ก.ย. 2569)
   · ระยะเท่ากับ mt-3 ของการ์ดอื่นบนหน้าแรกและ .install-card ที่อยู่ใต้มัน */
.remind {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-radius: 1rem;
  border: 1px solid var(--slate-200);
  background: #fff;
}
.remind-todo { border-color: #fde68a; background: #fffbeb; }
.remind-done { border-color: var(--brand-200); background: var(--brand-50); }
.remind-title {
  display: block;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 700;
  color: var(--slate-800);
}
.remind-note {
  display: block;
  margin-top: .125rem;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.5;
  color: var(--slate-600);
}
.remind-todo .remind-title { color: #92400e; }
.remind-todo .remind-note  { color: #78350f; }
.remind-done .remind-title { color: var(--brand-800); }
.remind-done .remind-note  { color: var(--brand-700); }

/* --- เพิ่มแอปไว้ที่หน้าจอโฮม (pages/partials/install_card.php · assets/js/install.js) ---
   ผู้ใช้ต้องการไอคอนบนหน้าจอมือถือ แทนการเปิดเบราว์เซอร์แล้วพิมพ์ที่อยู่เว็บทุกครั้ง

   [hidden] ต้องชนะเสมอ — .btn และ .sheet ตั้ง display ของตัวเองไว้ ซึ่งจำเพาะเท่ากับ
   กฎ [hidden] ของ Tailwind แล้วชนะเพราะมาทีหลัง ผลคือปุ่มของทุกโหมดโผล่พร้อมกันหมด
   (ปุ่มติดตั้งของ Android ขึ้นบน iPhone ด้วย ซึ่งกดแล้วไม่เกิดอะไรขึ้น) */
.install-card[hidden], .install-card [hidden],
.install-sheet[hidden], .install-sheet [hidden],
.install-backdrop[hidden] { display: none !important; }

.install-card {
  margin-top: .75rem;
  padding: .875rem;
  border: 1px solid var(--brand-200);
  border-radius: 1rem;
  background: var(--grad-brand-soft);
}
.install-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
/* ไอคอนจริงของแอป ไม่ใช่ไอคอนทั่วไป — ผู้ใช้จะได้จำหน้าตาไว้หาบนหน้าจอโฮมหลังเพิ่มเสร็จ */
.install-appicon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: .75rem;
  box-shadow: 0 4px 10px rgba(4, 120, 87, .25);
}
.install-title {
  margin: 0;
  font-size: calc(.9375rem * var(--text-scale));
  font-weight: 700;
  line-height: 1.4;
  color: #064e3b;
}
.install-note {
  margin: .125rem 0 0;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.6;
  color: var(--brand-800);
}
.install-body { margin-top: .75rem; }
.install-body > * + * { margin-top: .5rem; }
.install-warn {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: .625rem .75rem;
  border: 1px solid #fde68a;
  border-radius: .75rem;
  background: #fffbeb;
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.6;
  color: #78350f;
}
.install-done {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 600;
  color: var(--brand-800);
}
/* ปุ่ม <button> ต้องล้าง border/background/font เอง (กับดักเดียวกับ .sheet-back)
   สูงอย่างน้อย 44px เพราะเป็นเป้ากดของผู้สูงอายุ แม้หน้าตาจะเป็นแค่ข้อความ */
.install-later {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: .375rem;
  padding: .5rem;
  border: 0;
  border-radius: .75rem;
  background: none;
  font-family: inherit;
  font-size: calc(.8125rem * var(--text-scale));
  color: var(--slate-500);
  cursor: pointer;
}
.install-later:active { background: rgba(15, 23, 42, .05); }

/* ปุ่มจำลองของ Safari — สีฟ้า #007aff ของ iOS ให้ตรงกับที่ผู้ใช้จะเห็นในเบราว์เซอร์จริง */
.install-key {
  display: inline-grid;
  place-items: center;
  min-width: 1.875rem;
  height: 1.875rem;
  margin: 0 .125rem;
  padding: 0 .25rem;
  vertical-align: middle;
  border: 1px solid var(--slate-300);
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 1px 0 var(--slate-200);
  color: #007aff;
}

/* ในบรรทัดคำอธิบายย่อย ปุ่มจำลองเล็กลง ไม่งั้นดันระยะบรรทัดจนบรรทัดนั้นห่างจากบรรทัดอื่น */
.install-step-note .install-key,
.install-note .install-key {
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: .375rem;
}

.install-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1rem .5rem;
}
/* .sheet-back ตั้ง margin-left ติดลบไว้ให้ปุ่มย้อนกลับชิดซ้าย — ที่นี่ปุ่มปิดอยู่ขวา */
.install-sheet-head .sheet-back { margin-left: 0; margin-right: -.375rem; }
.install-sheet-body {
  overflow-y: auto;
  padding: .25rem 1rem 1.25rem;
}
.install-steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.install-steps li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.install-step-no {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--grad-brand);
  font-size: calc(.9375rem * var(--text-scale));
  font-weight: 700;
  color: #fff;
}
.install-step-title {
  margin: .1875rem 0 0;
  font-size: calc(.9375rem * var(--text-scale));
  line-height: 1.8;
  color: var(--slate-800);
}
.install-step-note {
  margin: .25rem 0 0;
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.8;
  color: var(--slate-500);
}
.install-tip {
  display: flex;
  gap: .5rem;
  margin-top: 1.125rem;
  padding: .75rem;
  border: 1px solid #bfdbfe;
  border-radius: .75rem;
  background: #eff6ff;
  color: #1e3a8a;
}
.install-tip p {
  margin: 0;
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.7;
}

/* --- คำอธิบายเกณฑ์แบบภาษาชาวบ้าน ------------------------------------------- */
/* วางบนพื้นเทาอ่อนเพื่อแยกออกจากค่าที่ผู้ใช้กรอกและเกณฑ์อ้างอิงด้านล่าง */
.crit-plain {
  margin-top: .5rem;
  padding: .4375rem .5625rem;
  background: var(--slate-50);
  border-left: 3px solid var(--brand-400);
  border-radius: .375rem;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.6;
  color: var(--slate-700);
}

/* --- กล่องคำแนะนำแบบกดเปิด (เช่น วิธีวัดเส้นรอบเอว) ------------------------ */
/* ใช้ <details> ของเบราว์เซอร์ จึงเปิด-ปิดได้แม้ JS ไม่ทำงาน */
.guide { margin-top: .625rem; }
.guide-summary {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .625rem;
  font-size: calc(.75rem * var(--text-scale));
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: .625rem;
  cursor: pointer;
  list-style: none;
}
.guide-summary::-webkit-details-marker { display: none; }
.guide-summary > span { flex: 1; }
.guide-caret { transition: transform .18s; }
.guide[open] .guide-caret { transform: rotate(90deg); }

.guide-body {
  margin-top: .5rem;
  padding: .875rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
}

.guide-figures { display: flex; gap: .625rem; }
.guide-fig { flex: 1; text-align: center; }
.guide-fig svg { width: 100%; height: auto; max-height: 11rem; }
.guide-fig figcaption {
  margin-top: .125rem;
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-500);
}
.guide-mark { font-weight: 800; margin-right: .1875rem; }
.guide-mark.is-ok { color: var(--brand-600); }
.guide-mark.is-no { color: #dc2626; }
.guide-fig.is-right svg { background: var(--brand-50); border-radius: .625rem; }
.guide-fig.is-wrong svg { background: #fef2f2; border-radius: .625rem; }

.guide-steps {
  margin: .875rem 0 0;
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.75;
  color: var(--slate-700);
}
.guide-steps strong { color: var(--brand-700); }

.guide-warn {
  margin-top: .875rem;
  padding: .625rem .75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: .625rem;
}
.guide-warn-title {
  font-size: calc(.75rem * var(--text-scale));
  font-weight: 700;
  color: #92400e;
  margin-bottom: .25rem;
}
.guide-warn ul {
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.7;
  color: #78350f;
}
.guide-warn-note {
  margin-top: .5rem;
  font-size: calc(.6875rem * var(--text-scale));
  line-height: 1.6;
  color: #92400e;
}

/* --- ช่องกรอก PIN แบบมาตรฐาน ---------------------------------------------- */
/*
 * ตัวเลขอยู่กลางช่องและเว้นช่องไฟกว้าง เพื่อให้ "นับหลักได้ด้วยตา" ว่าครบ 6 ตัวหรือยัง
 * ซึ่งสำคัญกับผู้ใช้สูงอายุที่มองจุด ●●●●●● ติดกันแล้วแยกไม่ออก
 *
 * ใช้คู่กับ data-digits เสมอ (app.js กรองให้เหลือเฉพาะตัวเลขและตัดที่ maxlength)
 * ไม่งั้นวางข้อความที่มีตัวอักษรลงไปได้ แล้วต้องไปเจอ error ที่เซิร์ฟเวอร์แทน
 *
 * คลาสนี้เขียนขนาดตัวอักษรทับ .input จึง **ไม่ได้รับพื้น 16px ของ .input ไปด้วย**
 * ต้องครอบ max() ซ้ำเองที่นี่ ไม่งั้นเครื่องที่ตั้งขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์
 * ให้เล็กกว่าปกติจะได้ค่าต่ำกว่า 16px แล้ว iOS ซูมค้างเฉพาะช่อง PIN ช่องเดียว
 * ซึ่งเป็นช่องแรกที่ผู้ใช้เจอตอนเข้าสู่ระบบพอดี (ดูคำอธิบายเต็มที่ .input)
 */
.pinbox {
  text-align: center;
  font-size: max(16px, calc(1.125rem * var(--text-scale)));
  letter-spacing: .5em;
  /* letter-spacing เติมช่องไฟท้ายตัวสุดท้ายด้วย ข้อความจึงเยื้องซ้ายครึ่งหนึ่งของค่านั้น */
  text-indent: .5em;
  font-variant-numeric: tabular-nums;
}

/* --- ช่องรหัสผ่านพร้อมปุ่มเปิดดู ------------------------------------------- */
/* ปุ่มวางทับมุมขวาของช่อง จึงต้องเว้นที่ด้านขวาไว้ไม่ให้ข้อความลอดใต้ปุ่ม */
.pw-field { position: relative; }
.pw-field .input { padding-right: 2.875rem; }
/*
 * ช่อง PIN ที่อยู่ในกรอบซึ่งมีปุ่มรูปตา ต้องเว้นซ้ายเท่ากับขวา
 * ไม่งั้น text-align:center จะกลางเทียบกับพื้นที่ที่เหลือ แล้วตัวเลขเยื้องไปทางซ้าย
 */
.pw-field .pinbox { padding-left: 2.875rem; }
.pw-toggle {
  position: absolute;
  right: .375rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  color: var(--slate-400);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--slate-700); background: var(--slate-100); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.pw-toggle[aria-pressed="true"] { color: var(--brand-600); }
/* บังคับซ่อนเอง ไม่พึ่งลำดับของ utility class ที่ Play CDN สร้างขึ้น
   (เคยเจอมาแล้วกับ .foodpic img ที่ .hidden แพ้กฎอื่นจนรูปโผล่ทับ) */
.pw-toggle span { display: flex; }
.pw-toggle span.hidden { display: none; }

/* --- "จำฉันไว้" ในหน้าเข้าสู่ระบบ ------------------------------------------ */
/* กล่องเตี้ยกว่า .check-card เพราะมีคำอธิบายสองบรรทัดอยู่แล้ว ไม่ต้องบังคับความสูง */
.remember {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: -.125rem 0 .875rem;
  padding: .625rem .75rem;
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
  background: var(--slate-50);
  cursor: pointer;
}
.remember input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .0625rem;
  accent-color: var(--brand-600);
  flex-shrink: 0;
}
.remember:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.remember-title {
  display: block;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 500;
  color: var(--slate-700);
}
.remember-note {
  display: block;
  margin-top: .125rem;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.5;
  color: var(--slate-500);
}

/* --- ปุ่ม ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .625rem 1.25rem;
  font-size: calc(.9375rem * var(--text-scale));
  font-weight: 600;
  border-radius: .875rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
  text-align: center;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, .28);
}
.btn-primary:not(:disabled):active {
  background: var(--grad-brand-deep);
  box-shadow: 0 1px 3px rgba(5, 150, 105, .3);
}

.btn-outline { background: #fff; color: var(--slate-700); border-color: var(--slate-300); }
.btn-outline:not(:disabled):active { background: #f1f5f9; }

.btn-ghost { background: transparent; color: var(--brand-700); min-height: 40px; padding: .375rem .75rem; }
.btn-ghost:not(:disabled):active { background: var(--brand-50); }

.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:not(:disabled):active { background: #b91c1c; }

.btn-sm { min-height: 36px; padding: .375rem .75rem; font-size: calc(.8125rem * var(--text-scale)); border-radius: .625rem; }

/* --- ตัวนับแก้วน้ำ — เต็มแก้วและครึ่งแก้ว (ก.ย. 2569) ---------------------------
   เดิมเป็นปุ่ม − + สี่เหลี่ยม 64px สองข้างตัวเลข · ผู้ใช้ขอให้บันทึกครึ่งแก้วได้
   จึงเป็นกริด 2×2 ที่เขียนบอกบนปุ่มเลยว่ากดแล้วได้เท่าไร

   ปุ่มเพิ่มสูงอย่างน้อย 64px (เท่าปุ่มเดิม) เพราะกดซ้ำ ๆ วันละหลายครั้ง
   และผู้ใช้ส่วนใหญ่เป็นผู้สูงอายุที่นิ้วใหญ่และมือสั่น
   · ปุ่มลดเตี้ยกว่าและเป็นขอบเส้น — ใช้เฉพาะตอนกดเกิน ไม่ควรเด่นเท่าปุ่มเพิ่ม
   · ทุกปุ่มใช้ touch-action: manipulation (ดูกฎรวมด้านล่าง) ไม่งั้น iOS ซูมเมื่อกดรัว ๆ */
.water-box {
  padding: .875rem;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  background: #fff;
  text-align: center;
}
.water-total { margin: 0; line-height: 1.2; }
.water-count {
  font-size: calc(2.25rem * var(--text-scale));
  font-weight: 700;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.water-unit {
  margin-left: .25rem;
  font-size: calc(.9375rem * var(--text-scale));
  color: var(--slate-500);
}
.water-hint {
  margin: .125rem 0 0;
  font-size: calc(.75rem * var(--text-scale));
  color: var(--slate-400);
}
.water-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: .25rem;
  min-height: 1.5rem;
  margin: .5rem 0 .75rem;
}
/* รูปแก้ว — น้ำเต็มแก้วกับครึ่งแก้วต่างกันที่ความสูงของสีน้ำ ผู้ใช้เห็นครึ่งแก้วได้ด้วยตา */
.water-glass {
  display: inline-block;
  flex-shrink: 0;
  width: 1rem;
  height: 1.5rem;
  border: 2px solid var(--brand-500);
  border-top-width: 1px;
  border-radius: 0 0 .375rem .375rem;
  background: var(--brand-200);
}
.water-glass.is-half {
  background: linear-gradient(to top, var(--brand-200) 0 50%, #fff 50% 100%);
}
.water-more {
  align-self: flex-end;
  font-size: calc(.6875rem * var(--text-scale));
  color: var(--slate-400);
}

.water-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
/* <button> ต้องล้าง font-family เอง — ไม่สืบทอดจากพ่อแม่ (กับดักเดียวกับ .sheet-back) */
.water-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .5rem;
  border: 1px solid var(--slate-300);
  border-radius: .875rem;
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  color: var(--slate-700);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.water-btn-main { font-size: calc(1rem * var(--text-scale)); line-height: 1.25; }
.water-btn-text { display: block; min-width: 0; }
/* คำว่า "เต็มแก้ว" / "ครึ่งแก้ว" ห้ามถูกตัดกลางคำ — จอ 320px กับตัวอักษรใหญ่มากเคยได้ "+ เต็ม / แก้ว"
   ขึ้นบรรทัดใหม่ได้เฉพาะหลังเครื่องหมาย + / − · และให้รูปแก้วตกลงไปบรรทัดของตัวเองได้เมื่อที่ไม่พอ */
.water-word { white-space: nowrap; }
.water-btn { flex-wrap: wrap; row-gap: .125rem; }

.water-btn-add {
  min-height: 64px;
  border-color: var(--brand-600);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, .28);
}
.water-btn-add:active { background: var(--grad-brand-deep); }
/* แก้วในปุ่มเพิ่มวาดบนพื้นเขียว — ขอบขาวถึงจะมองเห็น */
.water-btn-add .water-glass { border-color: #fff; background: rgba(255, 255, 255, .85); }
.water-btn-add .water-glass.is-half {
  background: linear-gradient(to top, rgba(255, 255, 255, .85) 0 50%, transparent 50% 100%);
}
.water-btn-remove { min-height: 52px; color: var(--slate-600); }
.water-btn-remove:active { background: #f1f5f9; }

/* ---------------------------------------------------------------------------
   ⚠ กดปุ่มรัว ๆ แล้ว iOS ซูมหน้าจอ (ผู้ใช้แจ้ง ก.ย. 2569)

   Safari บน iPhone ถือว่า "แตะสองครั้งติดกัน" คือคำสั่งซูม — ผู้ใช้กดปุ่มเพิ่มแก้วน้ำเร็ว ๆ
   หน้าจอจึงซูมเข้าไปที่จุดที่กด และผู้สูงอายุหลายคนไม่รู้วิธีถ่างนิ้วกลับ

   touch-action: manipulation ปิดเฉพาะ "แตะสองครั้งเพื่อซูม" แต่ **ยังถ่างนิ้วซูมได้ตามปกติ**
   · ห้ามแก้ด้วย maximum-scale=1 / user-scalable=no ใน viewport ซึ่งปิดการซูมทั้งหมด
     ผู้สูงอายุที่ต้องขยายตัวหนังสือจะใช้แอปไม่ได้ และผิดเกณฑ์ WCAG 1.4.4
   · ใส่ที่ html ด้วยเพราะการแตะรัว ๆ มักพลาดไปโดนช่องว่างระหว่างปุ่มหรือตัวเลข ไม่ใช่ตัวปุ่มพอดี
   · ใส่ซ้ำบนปุ่มและลิงก์โดยตรง เพราะ touch-action ไม่สืบทอด — Safari บางรุ่นดูแค่ element ที่ถูกแตะ
   · ผลพลอยได้: การกดตอบสนองทันที ไม่ต้องรอ 300ms ว่าจะแตะซ้ำหรือไม่
--------------------------------------------------------------------------- */
html,
button,
a,
label,
input,
select,
textarea,
summary,
[role="button"] {
  touch-action: manipulation;
}

/* --- ปุ่มเพิ่มอาหารของแต่ละมื้อ ------------------------------------------
   เดิมเป็น .btn-ghost .btn-sm เล็ก ๆ อยู่มุมขวาบนของการ์ด ผู้ใช้แจ้งว่ากดยากมาก
   ย้ายลงมาเต็มความกว้างใต้รายการอาหาร เพราะ
     - เป็นเป้ากดที่ใหญ่ที่สุดเท่าที่การ์ดจะให้ได้ และอยู่ตรงที่นิ้วโป้งเอื้อมถึงพอดี
     - อ่านตามลำดับแล้วเป็นธรรมชาติ: ดูรายการที่กินไปแล้ว → กดเพิ่มรายการต่อไป
   เส้นประบอกว่า "ยังเติมได้อีก" ต่างจากปุ่มทึบซึ่งดูเหมือนการกระทำหลักของการ์ด */
.meal-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 52px;
  margin-top: .625rem;
  padding: .625rem 1rem;
  font-family: inherit;
  font-size: calc(.9375rem * var(--text-scale));
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px dashed var(--brand-200);
  border-radius: .875rem;
  cursor: pointer;
}
.meal-add:active { background: var(--brand-100); }

/* --- การ์ด "พลังงานรวมของวันนี้" (หน้าบันทึกประจำวัน) ----------------------
   สีทั้งการ์ดเปลี่ยนตามสถานะที่ kcalStatus() ตัดสิน — เขียว = ยังอยู่ในงบ
   · เหลือง = ใกล้เต็มโควตา (ตั้งแต่ 90%) · แดง = เกินเป้าหมายแล้ว
   เจตนาเดียวกับบัตรสุขภาพ คือให้ผู้ใช้สูงอายุอ่านสถานะจากสีก่อนอ่านตัวเลข

   ทุกส่วนของการ์ด (ขีดซ้าย · ไอคอน · ตัวเลข · แถบ · ป้ายสถานะ) อ่านสีจากตัวแปร
   --kc-* ซึ่งประกาศไว้ในคลาสสถานะที่เดียว จึงไม่มีทางมีส่วนใดค้างสีเดิม
   เมื่อสถานะเปลี่ยน · JS สลับแค่คลาส ไม่ได้ทาสีเอง */
.kcal-card {
  --kc-line:    var(--grad-brand);
  --kc-fill:    var(--grad-brand);
  --kc-stripe:  none;
  --kc-icon:    var(--brand-600);
  --kc-text:    var(--slate-800);
  --kc-chip:    var(--brand-700);
  --kc-chip-bg: var(--brand-50);
}
.kcal-card.is-near {
  --kc-line:    linear-gradient(135deg, #b45309 0%, #fbbf24 100%);
  --kc-fill:    linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --kc-icon:    #d97706;
  --kc-text:    #b45309;
  --kc-chip:    #92400e;
  --kc-chip-bg: #fffbeb;
}
.kcal-card.is-over {
  --kc-line:    linear-gradient(135deg, #9f1239 0%, #f87171 100%);
  --kc-fill:    linear-gradient(135deg, #dc2626 0%, #f87171 100%);
  /* ลายทแยงบาง ๆ ทับบนแถบที่เต็มแล้ว — บอก "ล้นเกินเส้น" ด้วยลวดลายคู่กับสี
     เผื่อผู้ใช้ตาบอดสีเขียว-แดง ซึ่งเป็นกลุ่มที่แยกสองสถานะนี้ไม่ออกพอดี */
  --kc-stripe:  repeating-linear-gradient(135deg,
                  rgba(255, 255, 255, .28) 0 .375rem, transparent .375rem .75rem);
  --kc-icon:    #dc2626;
  --kc-text:    #b91c1c;
  --kc-chip:    #b91c1c;
  --kc-chip-bg: #fef2f2;
}
/* ทับ .card-accent::before ซึ่งตั้งขีดซ้ายเป็นสีหลักไว้ตายตัว */
.kcal-card::before { background: var(--kc-line); }
.kcal-card-icon { color: var(--kc-icon); }

.kcal-total {
  font-size: calc(1.125rem * var(--text-scale));
  font-weight: 800;
  color: var(--kc-text);
  font-variant-numeric: tabular-nums;
}
.kcal-total-unit {
  margin-left: .1875rem;
  font-size: calc(.75rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-400);
}

.kcal-track {
  height: .5rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--slate-200);
}
.kcal-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--kc-stripe), var(--kc-fill);
  transition: width .25s ease, background .25s ease;
}

.kcal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .375rem .5rem;
}
.kcal-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  border-radius: 999px;
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 700;
  color: var(--kc-chip);
  background: var(--kc-chip-bg);
}
.kcal-target {
  font-size: calc(.6875rem * var(--text-scale));
  color: var(--slate-400);
}
/* ไอคอนทั้งสองตัวอยู่ในมาร์กอัป แล้วเลือกโชว์ด้วยสถานะของการ์ด
   ถ้าให้ JS สลับไอคอนเอง มันต้องประกอบ <svg> ขึ้นมาเอง ซึ่งผิดกฎที่ให้ไอคอน
   มาจาก inc/icons.php ที่เดียว */
.kcal-chip-over { display: none; }
.kcal-card.is-near .kcal-chip-ok,
.kcal-card.is-over .kcal-chip-ok   { display: none; }
.kcal-card.is-near .kcal-chip-over,
.kcal-card.is-over .kcal-chip-over { display: block; }

/* --- แถบพลังงานลอยมุมขวาล่าง (หน้าบันทึกประจำวัน) ------------------------
   บันทึกอาหารหลายรายการแล้วการ์ด "พลังงานรวม" จะเลื่อนพ้นจอไป
   ผู้ใช้ต้องเลื่อนกลับขึ้นไปดูทุกครั้งที่เพิ่มอาหาร — แถบนี้ตามติดไปด้วย

   วางเหนือแคปซูลเมนูล่าง ไม่ใช่ทับ — ระยะเผื่อความสูงแคปซูล (66px) บวก safe area
   กดแล้วเลื่อนกลับไปที่การ์ดพลังงานรวม จึงไม่ใช่ป้ายตายที่กินที่เปล่า ๆ */
.kcal-fab {
  position: fixed;
  right: .875rem;
  bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  font-family: inherit;
  color: #fff;
  background: var(--grad-brand-deep);
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(6, 95, 70, .34);
  cursor: pointer;
  /* ซ่อนไว้ตอนที่การ์ดพลังงานรวมยังอยู่ในจอ จะได้ไม่บอกเลขซ้ำสองที่ */
  opacity: 0;
  transform: translateY(.625rem);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kcal-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ที่ว่างใต้ปุ่ม "บันทึกข้อมูลประจำวัน" เผื่อให้แถบลอยไม่ทับ
   ตำแหน่งของแถบมี env(safe-area-inset-bottom) รวมอยู่ด้วย บนเครื่องที่มีแถบ home indicator
   แถบจึงขยับสูงขึ้นตาม — ถ้าไม่เผื่อที่ตามไปพร้อมกัน แถบจะเลื่อนขึ้นมาทับปุ่มบันทึก
   (เจอจริงบนมือถือของผู้ใช้ ทั้งที่ตัวจำลองไม่มี safe area จึงวัดแล้วไม่พบปัญหา) */
.kcal-fab-space { height: calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
/* สีเดียวกับการ์ดพลังงานรวมด้านบนเสมอ — แถบนี้คือการ์ดใบเดียวกันที่ตามติดมา
   ถ้าสองที่สีไม่ตรงกัน ผู้ใช้จะไม่รู้ว่าอันไหนคือสถานะจริง
   · เกินเป้าหมายแม้แต่ 1 kcal ก็แดง (เดิมต้องเกิน 10% จึงจะเปลี่ยนสี) */
.kcal-fab.is-near {
  background: linear-gradient(135deg, #b45309 0%, #fbbf24 100%);
  box-shadow: 0 8px 22px rgba(180, 83, 9, .32);
}
.kcal-fab.is-over {
  background: linear-gradient(135deg, #9f1239 0%, #ef4444 100%);
  box-shadow: 0 8px 22px rgba(159, 18, 57, .34);
}
.kcal-fab-body { text-align: left; line-height: 1.15; }
.kcal-fab-num {
  font-size: calc(1.0625rem * var(--text-scale));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kcal-fab-unit   { margin-left: .125rem; font-size: calc(.6875rem * var(--text-scale)); opacity: .9; }
.kcal-fab-target { display: block; font-size: calc(.625rem * var(--text-scale)); opacity: .85; }

/* --- แผ่นสถิติที่มีไอคอนนำ ------------------------------------------------ */
.stat-tile {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  padding: .75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.stat-tile .stat-body { min-width: 0; }
.stat-tile .stat-label { font-size: calc(.6875rem * var(--text-scale)); color: var(--slate-400); line-height: 1.2; }
.stat-tile .stat-value { font-size: calc(1.25rem * var(--text-scale)); font-weight: 700; line-height: 1.2; }
.stat-tile .stat-unit  { font-size: calc(.6875rem * var(--text-scale)); font-weight: 500; color: var(--slate-400); margin-left: .1875rem; }

/* --- หัวการ์ดแบบมีพื้นไล่เฉด ---------------------------------------------- */
.panel-brand {
  background: var(--grad-brand-deep);
  color: #fff;
  border-color: transparent;
}
.panel-soft {
  background: var(--grad-brand-soft);
  border-color: var(--brand-200);
}

/* --- ป้ายสถานะ ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-low      { background: #d1fae5; color: #065f46; }
.badge-moderate { background: #fef3c7; color: #92400e; }
.badge-high     { background: #fee2e2; color: #991b1b; }
.badge-muted    { background: #f1f5f9; color: #475569; }

/* --- toast ---------------------------------------------------------------- */
.toast {
  pointer-events: auto;
  max-width: 24rem;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: .875rem;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 500;
  color: #fff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .18);
  animation: toast-in .22s ease-out;
}
.toast-success { background: #059669; }
.toast-error   { background: #dc2626; }
.toast-info    { background: #0f766e; }
.toast-warning { background: #d97706; }
.toast-out { animation: toast-out .2s ease-in forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(-14px); } }

/* --- bottom sheet (ตัวเลือกอาหาร) ---------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(15, 23, 42, .45);
}
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 41;
  margin: 0 auto;
  max-width: 28rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, .2);
  animation: sheet-up .22s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* --- ขั้นที่ 1 ของการเพิ่มอาหาร: การ์ดหมวด -------------------------------
   ผู้ใช้กลุ่มทดลองขอให้เลือกแบบแอปสั่งอาหาร — เปิดหมวดก่อน แล้วค่อยเข้าไปเลือกเมนู
   เพราะรายการรวม 283 รายการในลิสต์เดียวเลื่อนหาไม่ไหว

   ปุ่มย้อนกลับใน sheet ต้องเป็น <button> จึงต้องล้าง border/background/font ให้ครบ
   (กับดักเดียวกับปุ่มออกจากระบบในแถบเมนูข้างของระบบหลังบ้าน) */
.sheet-back {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -.375rem;
  padding: 0;
  border: 0;
  border-radius: .625rem;
  background: none;
  color: var(--slate-500);
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.sheet-back:active { background: #f1f5f9; }

/* --- ปุ่มปิดแผงเลือกอาหาร — ใหญ่และเด่น (ผู้ใช้ขอ ก.ย. 2569) ---------------------
   เดิมเป็น .btn-ghost .btn-sm ตัวหนังสือ "ปิด" สีเขียวเล็ก ๆ ไม่มีขอบ มุมขวาบน
   ผู้ใช้แจ้งว่า "เพิ่มอาหารแล้วขอปุ่มปิดเด่น ๆ ใหญ่ ๆ เห็นชัด" — แผงตั้งใจเปิดค้างไว้หลังเพิ่ม
   ผู้สูงอายุจึงติดอยู่ในแผงโดยไม่รู้ว่าออกทางไหน

   แก้สองชั้น: หัวแผงเป็นปุ่มแคปซูลมีขอบ + ไอคอน X สูง 48px
   และแถบ "เสร็จแล้ว" เต็มความกว้างติดท้ายแผงเสมอ (อยู่ตรงที่นิ้วโป้งเอื้อมถึง)
   · <button> ต้องล้าง border/background/font เอง (กับดักเดียวกับ .sheet-back) */
.sheet-close {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 1rem 0 .75rem;
  border: 2px solid var(--slate-300);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: calc(1rem * var(--text-scale));
  font-weight: 700;
  color: var(--slate-800);
  cursor: pointer;
}
.sheet-close:active { background: var(--slate-100); }

/* ติดท้ายแผง นอกส่วนที่เลื่อนได้ — ไม่เลื่อนหายไปกับรายการอาหาร */
.sheet-foot {
  flex-shrink: 0;
  padding: .75rem 1rem;
  border-top: 1px solid var(--slate-200);
  background: #fff;
  box-shadow: 0 -6px 16px rgba(15, 23, 42, .06);
}
.sheet-added {
  margin: 0 0 .5rem;
  text-align: center;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 600;
  color: var(--brand-700);
}
.sheet-added[hidden] { display: none; }
/* สีเขียวเข้มทึบ ต่างจากการ์ดเมนูสีขาวด้านบนชัดเจน — มองปราดเดียวรู้ว่าเป็นทางออก */
.sheet-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 60px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: var(--grad-brand-deep);
  box-shadow: 0 4px 12px rgba(6, 95, 70, .3);
  font-family: inherit;
  font-size: calc(1.125rem * var(--text-scale));
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.sheet-done:active { filter: brightness(.92); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 1rem .5rem 1.125rem;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.cat-card:active { transform: scale(.97); border-color: var(--brand-600); }
/* วงกลมพื้นเขียวอ่อนรอบไอคอน — ให้ผู้ใช้กวาดสายตาเจอหมวดจากรูปก่อนอ่านตัวหนังสือ */
.cat-card-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--brand-600);
  margin-bottom: .375rem;
}
.cat-card-name  { font-size: calc(.875rem * var(--text-scale)); font-weight: 600; color: var(--slate-800); line-height: 1.35; }
.cat-card-count { font-size: calc(.75rem * var(--text-scale));  color: var(--slate-400); }

/* --- ขั้นที่ 2: การ์ดอาหารในหมวด ----------------------------------------
   ภาพใหญ่เต็มความกว้างการ์ด เพราะผู้ใช้เป็นผู้สูงอายุที่จำอาหารจากรูปได้เร็วกว่าอ่านชื่อ
   กดที่ไหนก็ได้ทั้งการ์ด = เป้ากดใหญ่ที่สุดเท่าที่จะให้ได้ · ปุ่ม ⓘ มุมภาพไว้ดูรายละเอียด */
.food-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}
/* ปุ่มดูรายละเอียดต้องเป็น "พี่น้อง" ของการ์ด ไม่ใช่ลูก — ปุ่มซ้อนในปุ่มเป็น HTML
   ที่ไม่ถูกต้องและคลิกแล้วชนกัน · กรอบนี้จึงทำหน้าที่เป็นจุดอ้างอิงตำแหน่งให้ทั้งคู่ */
.food-card-wrap { position: relative; display: flex; }
.food-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: .875rem;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, transform .08s;
}
.food-card:active { transform: scale(.98); border-color: var(--brand-600); }
.food-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f1f5f9;
}
.food-card-empty {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ecfdf5;
  color: var(--brand-600);
}
/* ต้องเป็นคอลัมน์ ไม่ใช่ปล่อยให้ span ไหลต่อกันเป็นบรรทัดเดียว
   และ flex:1 + margin-top:auto ของป้ายแคลอรี่ ทำให้ป้ายอยู่ชิดล่างเสมอ
   การ์ดที่มีบรรทัดโซเดียมกับที่ไม่มีจึงยังดูเป็นแถวเดียวกัน */
.food-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: .5rem .625rem .625rem;
}
.food-card-name {
  display: -webkit-box;
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-800);
  line-height: 1.35;
  /* ชื่ออาหารไทยยาวไม่เท่ากัน — ตัดที่ 2 บรรทัดเพื่อให้ทุกการ์ดสูงเท่ากัน ลิสต์จะได้ไม่กระโดด */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.food-card-meta {
  display: block;
  margin-top: .125rem;
  font-size: calc(.6875rem * var(--text-scale));
  color: var(--slate-400);
  line-height: 1.4;
}
.food-card-kcal {
  align-self: flex-start;
  margin-top: auto;
  padding: .1875rem .5rem;
  border-radius: .5rem;
  background: #ecfdf5;
  color: #065f46;
  font-size: calc(.75rem * var(--text-scale));
  font-weight: 700;
}
/* ป้ายมุมภาพ — ข้าวที่โผล่ในทุกหมวด และปุ่มดูรายละเอียด */
.food-card-tag {
  position: absolute;
  top: .375rem;
  left: .375rem;
  padding: .125rem .375rem;
  border-radius: .375rem;
  background: rgba(6, 95, 70, .88);
  color: #fff;
  font-size: calc(.625rem * var(--text-scale));
  font-weight: 600;
}
.food-card-info {
  position: absolute;
  top: .3125rem;
  right: .3125rem;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--slate-600);
  cursor: pointer;
}

/* แผ่นที่ซ้อนทับแผ่นแรก (เลือกปริมาณ ซ้อนบนเลือกอาหาร)
   ต้องสูงกว่า .sheet ซึ่งอยู่ที่ 41 แต่ยังต่ำกว่าหน้าต่างรายละเอียดอาหารที่ 60 */
.sheet-backdrop.sheet-stack { z-index: 45; }
.sheet.sheet-stack          { z-index: 46; }

.sheet-handle {
  width: 2.5rem;
  height: .25rem;
  border-radius: 999px;
  background: var(--slate-300);
  margin: .625rem auto .25rem;
  flex-shrink: 0;
}

/* --- เลือกปริมาณที่ทาน (แผ่นซ้อนบนตัวเลือกอาหาร) --------------------------
   กลุ่มทดลองขอมา ก.ย. 2569 พร้อมอินโฟกราฟิกที่แบ่งไว้ 6 ระดับ
   ¼ ½ ¾ 1 แล้วต่อด้วย 1½ กับ 2 ที่กำกับว่า "หากรับประทานมากกว่า 1 จาน"

   ปุ่มสูง 68px ด้วยเหตุผลเดียวกับปุ่มเพิ่มแก้วน้ำ (.water-btn-add) — ผู้ใช้เป็นผู้สูงอายุ
   และนี่เป็นปุ่มที่ต้องกดทุกครั้งที่บันทึกอาหาร ไม่ใช่กดนาน ๆ ครั้ง */
.portion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.portion-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  min-height: 68px;
  padding: .375rem .25rem;
  border: 1px solid var(--slate-300);
  border-radius: .875rem;
  background: #fff;
  color: var(--slate-700);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.portion-frac { font-size: calc(1.375rem * var(--text-scale)); font-weight: 700; line-height: 1.1; }
.portion-kcal { font-size: calc(.6875rem * var(--text-scale)); color: var(--slate-400); line-height: 1.2; }

/* สถานะที่เลือก — ใช้ .is-on แบบเดียวกับ .kcal-fab
   ไม่ใช้คลาส !bg-brand-50 ของ Tailwind แบบชิปหมวด เพราะปุ่มนี้อยู่ใน app.css ทั้งก้อน */
.portion-btn.is-on {
  background: var(--grad-brand);
  border-color: var(--brand-600);
  color: #fff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, .28);
}
.portion-btn.is-on .portion-kcal { color: rgba(255, 255, 255, .88); }

/* ระดับที่เกิน 1 หน่วยมาตรฐาน — บอกด้วย **ป้ายคำ** คู่กับสี
   ไม่ใช่สีอย่างเดียว เพื่อให้ผู้ใช้ตาบอดสีแยกออกเช่นกัน
   (แนวเดียวกับจุดใต้ไอคอนของแถบเมนูล่าง) */
.portion-btn.is-over { border-color: #fcd34d; background: #fffbeb; }
.portion-btn.is-over .portion-frac { color: #b45309; }
.portion-btn.is-over.is-on {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #d97706;
}
.portion-btn.is-over.is-on .portion-frac { color: #fff; }
.portion-over-tag {
  font-size: calc(.625rem * var(--text-scale));
  font-weight: 600;
  color: #b45309;
  line-height: 1;
}
.portion-btn.is-over.is-on .portion-over-tag { color: rgba(255, 255, 255, .92); }

/* แถวชิป "กินคู่กับ" ในแผ่นเลือกปริมาณ */
.portion-pairs {
  margin-top: .625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
}
.portion-pairs-label { font-size: calc(.75rem * var(--text-scale)); color: var(--slate-500); }
.portion-pair-btn {
  padding: .3125rem .625rem;
  border: 1px dashed var(--brand-600);
  border-radius: 999px;
  background: #ecfdf5;
  color: #065f46;
  font-family: inherit;
  font-size: calc(.75rem * var(--text-scale));
  font-weight: 600;
  cursor: pointer;
}

.portion-summary {
  margin-top: .75rem;
  font-size: calc(1rem * var(--text-scale));
  font-weight: 700;
  color: var(--slate-800);
}
.portion-sodium {
  margin-top: .125rem;
  font-size: calc(.75rem * var(--text-scale));
  color: var(--slate-500);
}
.portion-warn {
  margin-top: .375rem;
  padding: .5rem .625rem;
  border-radius: .625rem;
  background: #fffbeb;
  color: #92400e;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.5;
}

/* --- หน้าต่างรายละเอียดอาหาร (lightbox) ---------------------------------- */
.foodbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .55);
  animation: fade-in .15s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- หน้าต่างแจ้งบันทึกสำเร็จ (หน้าบันทึกประจำวัน) -------------------------
   กรรมการขอให้ยืนยันด้วยหน้าต่างกลางจอ ไม่ใช่ toast มุมบน เพราะผู้สูงอายุมักไม่ทันเห็น
   แล้วกดบันทึกซ้ำเพราะไม่แน่ใจว่าติดหรือยัง

   หน่วงไว้ราว 2 วินาทีก่อนเปลี่ยนหน้า พร้อมแถบเวลาที่วิ่งให้เห็นว่าระบบกำลังทำงาน
   ไม่ใช่ค้าง · ความยาวของแถบตั้งจาก JS ที่เดียว (SAVE_REDIRECT_MS) จะได้ตรงกับเวลาจริงเสมอ */
.savebox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, .55);
  animation: fade-in .15s ease-out;
}
.savebox {
  width: 100%;
  max-width: 19rem;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  animation: savebox-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes savebox-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

.savebox-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(5, 150, 105, .35);
}

.savebox-title {
  margin-top: 1rem;
  font-size: calc(1.125rem * var(--text-scale));
  font-weight: 700;
  line-height: 1.4;
  color: var(--slate-800);
}
.savebox-note {
  margin-top: .375rem;
  font-size: calc(.8125rem * var(--text-scale));
  color: var(--slate-500);
}


.savebox-bar {
  height: 4px;
  margin-top: 1.125rem;
  overflow: hidden;
  background: var(--slate-200);
  border-radius: 999px;
}
.savebox-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--grad-brand);
  border-radius: 999px;
  animation: savebox-fill linear forwards;   /* ความยาวตั้งจาก JS */
}
@keyframes savebox-fill { to { width: 100%; } }

.foodbox {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  top: 2.5rem;
  z-index: 61;
  margin: 0 auto;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, .25);
  animation: sheet-up .24s ease-out;
  overflow: hidden;
}

.foodbox-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.foodbox-close:active { background: rgba(15, 23, 42, .75); }

.foodbox-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.foodbox-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
  overflow: hidden;
}
.foodbox-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ป้ายบอกว่าเป็นภาพประกอบ ไม่ใช่ภาพถ่ายจริง — สำคัญเพราะเป็นแอปงานวิจัย */
.foodbox-hero-tag {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .1875rem .5rem;
  font-size: calc(.625rem * var(--text-scale));
  font-weight: 500;
  color: #fff;
  background: rgba(15, 23, 42, .58);
  border-radius: .375rem;
  backdrop-filter: blur(3px);
}

/* ไม่มีรูป: ย่อเป็นแถบสีเตี้ย ๆ แทนกล่องเปล่าสูง ๆ ที่เสียพื้นที่บนมือถือ */
.foodbox-hero.is-empty {
  aspect-ratio: auto;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
}

.foodbox-body { padding: 1rem; }

.foodbox-title {
  font-size: calc(1.125rem * var(--text-scale));
  font-weight: 700;
  color: var(--slate-800);
  line-height: 1.35;
}
.foodbox-sub { margin-top: .1875rem; font-size: calc(.75rem * var(--text-scale)); color: var(--slate-400); }

.foodbox-section { margin-top: 1.125rem; }
.foodbox-section h4 {
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .375rem;
}

/* ตารางคุณค่าทางโภชนาการ */
.nutri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .375rem;
}
.nutri-cell {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: .625rem;
  padding: .5rem .375rem;
  text-align: center;
}
.nutri-cell .k { font-size: calc(.625rem * var(--text-scale)); color: var(--slate-400); display: block; line-height: 1.3; }
.nutri-cell .v { font-size: calc(.9375rem * var(--text-scale)); font-weight: 700; color: var(--slate-800); }
.nutri-cell .u { font-size: calc(.625rem * var(--text-scale)); font-weight: 500; color: var(--slate-400); margin-left: .0625rem; }
.nutri-cell.is-primary { background: var(--brand-50); border-color: var(--brand-200); }
.nutri-cell.is-primary .v { color: var(--brand-700); }
.nutri-cell.is-warn { background: #fff7ed; border-color: #fed7aa; }
.nutri-cell.is-warn .v { color: #c2410c; }

/* ป้ายกำกับกลุ่มเล็ก */
.chip-row { display: flex; flex-wrap: wrap; gap: .3125rem; }
.chip {
  display: inline-block;
  padding: .25rem .5rem;
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 500;
  border-radius: .5rem;
  background: #f1f5f9;
  color: #475569;
}
.chip-good  { background: var(--brand-50); color: var(--brand-700); }
.chip-warn  { background: #fef3c7; color: #92400e; }
/* สามสีนี้เดิมอยู่ใน admin.css ย้ายมาไว้ที่นี่เพราะฝั่งผู้ใช้ก็ใช้ (ป้ายระดับข่าวประกาศ)
   หน้าหลังบ้านโหลด app.css ก่อน admin.css อยู่แล้ว จึงใช้ได้ทั้งสองฝั่ง */
.chip-sky   { background: #e0f2fe; color: #075985; }
.chip-rose  { background: #ffe4e6; color: #9f1239; }
.chip-slate { background: #e2e8f0; color: #334155; }
.chip-brand { background: var(--brand-100); color: var(--brand-800); }

/* --- ข่าวประกาศบนหน้าแรก ----------------------------------------------------
   หน้าแรกแสดงเฉพาะหัวข้อเพื่อไม่ให้ข่าวยาว ๆ ดันเนื้อหาสุขภาพตกจอ
   แตะแล้วเปิดอ่านเต็มใน lightbox (assets/js/announce.js) */
/* ตัวเลขแดงบนกระดิ่ง — ลดลงเมื่อผู้ใช้กด "รับทราบแล้ว" เท่านั้น */
.bell-badge {
  position: absolute;
  top: .0625rem;
  right: .0625rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 .25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: calc(.625rem * var(--text-scale));
  font-weight: 700;
  line-height: 1;
}
.bell-badge[hidden] { display: none; }

.ann-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .625rem .125rem;
  text-align: left;
  border-radius: .625rem;
  -webkit-tap-highlight-color: rgba(16, 185, 129, .12);
}
.ann-item + .ann-item { border-top: 1px solid #f1f5f9; }
.ann-item:active { background: #f8fafc; }

/* จุดสีหน้าหัวข้อในรายการของกระดิ่ง — โปร่งใสเมื่ออ่านแล้ว จึงยังกินที่เท่าเดิม แถวไม่ขยับ */
.ann-dot { width: .5rem; height: .5rem; border-radius: 999px; flex-shrink: 0; }
.ann-list { margin-top: .75rem; }
.ann-title.is-read { font-weight: 500; color: var(--slate-500); }

.annbox-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  margin-top: 1.25rem;
  padding: .625rem;
  border-radius: .75rem;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: calc(.8125rem * var(--text-scale));
  font-weight: 600;
}

.ann-title {
  display: block;
  font-size: calc(.875rem * var(--text-scale));
  font-weight: 600;
  color: var(--slate-800);
  line-height: 1.35;
  /* ตัดที่บรรทัดเดียว หัวข้อยาวจะได้ไม่ดันแถวสูงไม่เท่ากัน */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-meta {
  display: block;
  margin-top: .0625rem;
  font-size: calc(.6875rem * var(--text-scale));
  color: var(--slate-400);
}

/* หน้าต่างอ่านข่าว — ใช้โครง .foodbox เดิม เปลี่ยนเฉพาะเนื้อใน */
.annbox { top: auto; max-height: 85vh; }
.annbox-bar { display: block; height: 4px; width: 100%; }
.annbox-body { padding: 1.25rem 1.125rem 1.5rem; }

.annbox-title {
  margin-top: .5rem;
  font-size: calc(1.0625rem * var(--text-scale));
  font-weight: 700;
  line-height: 1.4;
  color: var(--slate-800);
}
.annbox-date { margin-top: .25rem; font-size: calc(.6875rem * var(--text-scale)); color: var(--slate-400); }
.annbox-text {
  margin-top: .875rem;
  font-size: calc(.875rem * var(--text-scale));
  line-height: 1.75;
  color: var(--slate-600);
  white-space: pre-line;   /* คงการขึ้นบรรทัดที่ผู้ดูแลพิมพ์ไว้ */
}

/* รายการส่วนผสมและขั้นตอน */
.recipe-list { margin: 0; padding: 0; list-style: none; }
.recipe-list li {
  display: flex;
  gap: .5rem;
  font-size: calc(.8125rem * var(--text-scale));
  line-height: 1.55;
  color: var(--slate-700);
  padding: .3125rem 0;
}
.recipe-list li + li { border-top: 1px solid #f8fafc; }
.recipe-list .bullet {
  flex: 0 0 auto;
  margin-top: .5rem;
  width: .25rem;
  height: .25rem;
  border-radius: 999px;
  background: var(--slate-300);
}
.recipe-steps { counter-reset: step; }
.recipe-steps li { align-items: flex-start; }
.recipe-steps .num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: calc(.6875rem * var(--text-scale));
  font-weight: 700;
}

.foodbox-note {
  margin-top: .625rem;
  font-size: calc(.6875rem * var(--text-scale));
  line-height: 1.55;
  color: var(--slate-400);
}

.info-box {
  border-radius: .75rem;
  padding: .625rem .75rem;
  font-size: calc(.75rem * var(--text-scale));
  line-height: 1.55;
}
.info-box-amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.info-box-slate { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

/* --- รูปย่อของรายการอาหาร -------------------------------------------------- */
.food-thumb {
  flex: 0 0 auto;
  border-radius: .625rem;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.food-thumb-empty {
  display: grid;
  place-items: center;
  color: #cbd5e1;
  background: #f8fafc;
}

/* ทำให้รายการอาหารที่กดได้ดูกดได้ */
.tappable { cursor: pointer; -webkit-tap-highlight-color: rgba(16, 185, 129, .12); }
.tappable:active { background: #f8fafc; }

/* --- อื่น ๆ --------------------------------------------------------------- */
.divide-rows > * + * { border-top: 1px solid #f1f5f9; }

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: .5rem;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--slate-400); font-size: calc(.875rem * var(--text-scale)); }

/* ซ่อนสกอลบาร์แนวนอนของแถวชิป */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@media print {
  header, nav, .no-print { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}