/* Family Health Log — styles */

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --shadow: 0 1px 2px rgba(11,11,11,.05), 0 6px 20px rgba(11,11,11,.05);

  --series-1: #2a78d6;  /* ตัวบน SBP */
  --series-2: #eb6834;  /* ตัวล่าง DBP */
  --series-3: #1baf7a;  /* ชีพจร */
  --series-7: #4a3aa7;  /* น้ำหนัก */

  --good: #0ca30c;
  --good2: #6cbb3c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;

  /* ขนาดที่โหมดตัวใหญ่จะปรับ */
  --base: 16px;
  --field-h: 44px;
  --field-fs: 1rem;
  --big-fs: 2rem;
  --btn-h: 42px;
  --label-fs: .8rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-7: #9085e9;
    --accent: #3987e5;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-7: #9085e9;
  --accent: #3987e5;
}

/* ---------- โหมดตัวใหญ่ (ผู้สูงอายุ) ---------- */
body.big {
  --base: 19px;
  --field-h: 62px;
  --field-fs: 1.25rem;
  --big-fs: 2.6rem;
  --btn-h: 56px;
  --label-fs: .95rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}


.hidden { display: none !important; }
.en { color: var(--muted); font-weight: 400; font-size: .82em; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.err { color: var(--critical); font-weight: 550; min-height: 1.2em; }
small.hint { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; }
.nowrap { white-space: nowrap; }

/* ---------- layout ---------- */

/* ---------- โครงหน้าจอแบบแอพ ----------
   เดิมแถบแท็บกับแถบบันทึกเป็น position:fixed ซึ่งบน Android รุ่นใหม่ที่วาดจอแบบ
   edge-to-edge จะไหลลงไปอยู่ใต้แถบปุ่มของระบบจนโดนบัง
   เปลี่ยนมาเป็นคอลัมน์เดียว สูงเท่าจอที่มองเห็นจริง (dvh) แล้วให้เนื้อหาเลื่อนข้างใน
   แถบล่างจึงเป็นส่วนหนึ่งของโครงหน้า ไม่มีทางหลุดขอบอีก                            */

#app { display: flex; flex-direction: column; }
#app:not(.hidden) {
  height: 100vh;        /* เบราว์เซอร์เก่า */
  height: 100dvh;       /* ตัวจริง: ไม่นับแถบของเบราว์เซอร์/ระบบ */
}

.wrap {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 900px; width: 100%; margin: 0 auto; padding: 0 16px 28px;
}

/* ปิดการซูมด้วยดับเบิลแท็บทั้งแอพ — เป็นการซูมที่เกิดจากกดพลาดล้วน ๆ
   ส่วนการซูมสองนิ้วยังปล่อยไว้ ใครสายตาไม่ดีจะได้ยังขยายดูได้ (ล็อกได้ในหน้าตั้งค่า) */
html { touch-action: manipulation; }

.topbar {
  flex: none; z-index: 30;
  background: var(--plane);
  border-bottom: 1px solid var(--border);
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
}
.topbar-inner {
  max-width: 900px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.02rem; margin-right: auto; letter-spacing: -.01em; }
.brand span { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.person-select { flex: 1 1 180px; min-width: 150px; }

/* ---------- tabs ---------- */

.tabs {
  flex: none; z-index: 40;
  display: flex; background: var(--surface-1);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1; border: 0; background: none; cursor: pointer;
  padding: 9px 2px 8px; font: inherit; font-size: .72rem;
  color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tabs button svg { width: 21px; height: 21px; stroke-width: 1.7; }
.tabs button[aria-selected="true"] { color: var(--accent); font-weight: 600; }
body.big .tabs button { font-size: .8rem; padding: 11px 2px 10px; }
body.big .tabs button svg { width: 26px; height: 26px; stroke-width: 1.9; }

/* ---------- cards ---------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.card > h2 {
  margin: 0 0 12px; font-size: 1rem; font-weight: 650;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.card > h2 .en { font-size: .78rem; }
.card-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.card-head > h2 { margin: 0; font-size: 1rem; font-weight: 650;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-head > h2 .en { font-size: .78rem; }
.card-head > .btn { flex: none; }
.section-title { margin: 22px 0 -4px; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- stat tiles ---------- */

/* margin-top เท่ากับ .card เพื่อไม่ให้ใบแรกไปชนเส้นใต้แถบหัว */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px;
}
.tile .label { font-size: .75rem; color: var(--muted); display: block; }
.tile .value {
  font-size: 1.8rem; font-weight: 640; letter-spacing: -.02em; line-height: 1.15;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px;
}
.tile .value small { font-size: .5em; font-weight: 500; color: var(--text-secondary); }
.tile .sub { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
/* ค่าเฉลี่ย 7 วัน — แยกเส้นบาง ๆ ให้เห็นว่าเป็นคนละเรื่องกับค่าล่าสุดด้านบน */
.tile .avg {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.tile .avg-lbl { flex: 1 0 100%; font-size: .72rem; line-height: 1.3; }
.tile .avg-val { font-size: .98rem; font-weight: 640; letter-spacing: -.01em; }
.tile .avg-val .v { font-weight: inherit; }
.tile .avg.few { display: block; font-size: .72rem; line-height: 1.35; }
body.big .tile .avg-lbl, body.big .tile .avg.few { font-size: .82rem; }
body.big .tile .avg-val { font-size: 1.12rem; }
body.big .tile .label { font-size: .85rem; }
body.big .tile .value { font-size: 2.05rem; }
body.big .tile .sub { font-size: .88rem; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600; padding: 2px 8px 2px 6px;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-primary); background: transparent;
}
body.big .badge { font-size: .88rem; padding: 3px 10px 3px 8px; }
.badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.badge.good i { background: var(--good); }
.badge.warning i { background: var(--warning); }
.badge.serious i { background: var(--serious); }
.badge.critical i { background: var(--critical); }
.badge.info i { background: var(--band-low); }
.badge.crisis i { background: var(--band-crisis); }

/* ---------- forms ---------- */

label.field { display: block; margin: 0 0 12px; }
label.field > span:first-child {
  display: block; font-size: var(--label-fs); color: var(--text-secondary);
  margin-bottom: 5px; font-weight: 550;
}
input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 10px 12px;
  min-height: var(--field-h); font-size: var(--field-fs);
  background: var(--plane);
  border: 1px solid var(--axis); border-radius: 10px;
  color: var(--text-primary);
}
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; appearance: textfield; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px;
}
/* ช่องที่ถูกล็อกไว้ ให้เห็นชัดว่ากดเปลี่ยนไม่ได้ */
select:disabled, input:disabled {
  color: var(--muted); background: var(--surface-1);
  border-style: dashed; cursor: not-allowed; opacity: 1;
}
textarea { min-height: 62px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row > * { min-width: 0; }   /* กันช่องกว้างเกินจนดันกริดล้น */
@media (max-width: 460px) { .row { grid-template-columns: 1fr; } }

/* iOS/Safari ให้ช่องวันที่-เวลามีความกว้างในตัวของมันเอง แล้วไม่ยอมหดตามกล่อง
   จนล้นออกนอกหน้าต่าง ปิด appearance เดิมทิ้งแล้วบังคับให้กว้างเท่ากล่องเหมือนช่องอื่น */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; max-width: 100%;
  text-align: left; font-variant-numeric: tabular-nums;
}
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 {
  text-align: left; margin: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--btn-h); padding: 8px 16px;
  border-radius: 10px; border: 1px solid var(--axis);
  background: var(--surface-1); cursor: pointer; font-weight: 600; font-size: .95rem;
}
.btn:hover { border-color: var(--text-secondary); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--critical); border-color: var(--critical); }
.btn.sm { min-height: 38px; padding: 6px 12px; font-size: .86rem; border-radius: 8px; }
body.big .btn.sm { min-height: 46px; font-size: .95rem; }
.btn.block { width: 100%; }
.btn.link { border: 0; background: none; color: var(--text-secondary);
  text-decoration: underline; font-weight: 500; min-height: 0; padding: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.chiprow { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  min-height: var(--btn-h); padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--axis); background: var(--surface-1);
  cursor: pointer; font-size: .9rem; font-weight: 550;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- หน้ากรอกค่า ---------- */

/* หัวการ์ดบันทึก — แถบเลือกโหมดด้านบนบอกอยู่แล้วว่ากำลังบันทึกอะไร
   หัวข้อซ้ำจึงซ่อนไว้ (ยังอ่านออกด้วยโปรแกรมอ่านหน้าจอ) เหลือไว้แต่ "บันทึกให้ใคร"
   ได้ที่คืนมาให้วงล้อเต็ม ๆ หนึ่งบรรทัด */
.entry-head { margin-bottom: 10px; }
.entry-head > h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.entry-for { margin: 0; color: var(--text-secondary); font-size: .9rem; }
.entry-for b { color: var(--text-primary); font-size: 1.05rem; }
body.big .entry-for { font-size: 1rem; }
body.big .entry-for b { font-size: 1.15rem; }

.entry-group {
  margin: 22px 0 10px; font-weight: 650; font-size: 1.02rem;
  padding-bottom: 6px; border-bottom: 1px solid var(--grid);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
body.big .entry-group { font-size: 1.12rem; }
.entry-group .req { margin-left: auto; font-size: .8rem; font-weight: 500; color: var(--muted); }
body.big .entry-group .req { font-size: .9rem; }

/* สลับระหว่าง “ความดัน” กับ “น้ำหนัก/ส่วนสูง” */
.modeswitch { display: flex; gap: 8px; margin: 14px 0 0; }
.modeswitch button {
  flex: 1; min-height: calc(var(--btn-h) + 6px);
  border: 1px solid var(--axis); background: var(--surface-1);
  border-radius: 12px; cursor: pointer; font-weight: 650; font-size: 1rem;
  color: var(--text-secondary); padding: 8px 10px;
}
.modeswitch button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
body.big .modeswitch button { font-size: 1.1rem; }

/* ปุ่มลัดในหน้า “วันนี้” */
.quick { display: grid; gap: 10px; margin: 14px 0; }
.quick-btn {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 18px; min-height: calc(var(--btn-h) + 24px);
  font-size: 1.05rem; border-radius: 12px; text-align: left;
}
.quick-btn small { font-weight: 450; font-size: .82rem; opacity: .85; }
body.big .quick-btn { font-size: 1.2rem; }
body.big .quick-btn small { font-size: .92rem; }

.when-edit { padding: 6px 4px; flex: none; }

/* ---------- บีบหน้ากรอกให้วงล้ออยู่ในจอ ----------
   ใช้กับเครื่องที่ตั้งขนาดอักษรของระบบไว้ใหญ่ ซึ่งดันวงล้อตกขอบจอ
   app.js วัดของจริงแล้วใส่คลาส .t1 … .t6 ทีละขั้นจนพอดี
   ลำดับคือตัดของที่ไม่จำเป็นก่อน ชื่อคนที่กำลังบันทึกให้กับวงล้อยอมตัดท้ายสุด */
#view-add.t1 .meter-note { display: none; }
#view-add.t1 .meter { margin-bottom: 10px; }

#view-add.t2 .meter-bar { display: none; }
#view-add.t2 .meter { margin: 4px 0 8px; }
#view-add.t2 .meter-label { margin-bottom: 0; }

#view-add.t3 .modeswitch { margin-top: 8px; }
#view-add.t3 .modeswitch button { padding: 8px 10px; }
#view-add.t3 .entry { margin: 8px 0; padding: 12px; }
#view-add.t3 .when { padding: 8px 10px; }
#view-add.t3 .when-label { display: none; }

#view-add.t4 .entry-head { display: none; }

#view-add.t5 .wheel { --item: 56px; }
#view-add.t5 .wheel-item { font-size: 1.6rem; }
#view-add.t5 .wheel-lbl { margin-bottom: 3px; }
#view-add.t5 .wheel-unit { margin-top: 3px; }

#view-add.t6 .wheel { --item: 46px; }
#view-add.t6 .wheel-item { font-size: 1.35rem; }
#view-add.t6 .wheel-unit { display: none; }

/* ขั้นสุดท้าย: ตัดคำอังกฤษกำกับและย่อข้อความรอบ ๆ ให้เหลือบรรทัดเดียว */
#view-add.t7 .wheel-lbl .en,
#view-add.t7 .modeswitch .en,
#view-add.t7 .when-value .en { display: none; }
#view-add.t7 .wheel-lbl { font-size: .72rem; white-space: nowrap; }
#view-add.t7 .modeswitch button { font-size: .95rem; padding: 7px 8px; }
#view-add.t7 .meter-label { font-size: .98rem; }
#view-add.t7 .when-value { font-size: 1rem; }
#view-add.t7 .when { padding: 6px 10px; }

/* ---------- วงล้อหมุนเลือกตัวเลข ---------- */

.wheels { display: flex; gap: 10px; align-items: flex-start; }
.wheels.one { max-width: 320px; margin: 0 auto; }

/* คู่วงล้อ จำนวนเต็ม . ทศนิยม */
.wheelpair { display: flex; align-items: stretch; gap: 6px; }
.wheelpair .wheel { flex: 1 1 auto; }
.wheelpair .wheel.dec { flex: 0 0 84px; }
body.big .wheelpair .wheel.dec { flex-basis: 96px; }
.wheel-dot {
  align-self: center; font-size: 1.9rem; font-weight: 800; line-height: 1;
  color: var(--text-secondary); padding: 0 1px;
}
body.big .wheel-dot { font-size: 2.2rem; }
.wheelcol { flex: 1; min-width: 0; text-align: center; }
.wheel-lbl { font-size: var(--label-fs); color: var(--text-secondary); font-weight: 550; margin-bottom: 6px; }
.wheel-unit { font-size: .8rem; color: var(--muted); margin-top: 6px; }
body.big .wheel-unit { font-size: .9rem; }

.wheel {
  --item: 56px;
  /* +2px ชดเชยเส้นขอบ เพื่อให้พื้นที่ด้านในสูงเท่ากับ 3 แถวพอดี */
  position: relative; height: calc(var(--item) * 3 + 2px);
  border: 1px solid var(--axis); border-radius: 12px;
  background: var(--plane); overflow: hidden;
}
body.big .wheel { --item: 66px; }
.wheel::before, .wheel::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--item);
  pointer-events: none; z-index: 2;
}
.wheel::before { top: 0; background: linear-gradient(var(--plane), transparent); }
.wheel::after { bottom: 0; background: linear-gradient(transparent, var(--plane)); }
.wheel-center {
  position: absolute; left: 4px; right: 4px; top: var(--item); height: var(--item);
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  pointer-events: none; z-index: 1;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.wheel-list {
  height: 100%; overflow-y: scroll; padding: var(--item) 0;
  scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wheel-list::-webkit-scrollbar { display: none; }
.wheel-item {
  height: var(--item); line-height: var(--item);
  scroll-snap-align: center; cursor: pointer;
  font-size: 1.5rem; font-weight: 600; color: var(--text-secondary);
  opacity: .4; font-variant-numeric: tabular-nums;
}
body.big .wheel-item { font-size: 1.85rem; }
.wheel-item.sel { opacity: 1; color: var(--accent); font-weight: 700; }

/* ---------- แถบระดับความดัน ---------- */

:root { --band-low: #2a78d6; --band-crisis: #9b1c1c; }
:root[data-theme="dark"], :root:not([data-theme="light"]) { --band-low: #3987e5; }

.meter { margin: 10px 0 14px; }
.meter-label { text-align: center; font-weight: 650; font-size: 1.02rem; margin-bottom: 7px; min-height: 1.5em; }
body.big .meter-label { font-size: 1.15rem; }
.meter-bar {
  position: relative; display: flex; gap: 2px; height: 14px; margin-bottom: 16px;
}
.meter-bar span.band { flex: 1; border-radius: 3px; }
.meter-bar span.marker {
  position: absolute; top: -5px; width: 4px; height: 26px; border-radius: 2px;
  background: var(--text-primary); transform: translateX(-2px);
  transition: left .18s ease; z-index: 2;
}
.meter-bar span.marker::after {
  content: ""; position: absolute; left: 50%; top: 28px; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 7px solid var(--text-primary);
}
.meter-note { font-size: .76rem; color: var(--muted); text-align: center; }
body.big .meter-note { font-size: .86rem; }

/* ---------- ตารางเกณฑ์ความดัน ---------- */

.wide-dialog { width: min(600px, calc(100vw - 24px)); }
.wide-dialog .btn-row { position: sticky; bottom: -18px; z-index: 2;
  background: var(--surface-1); padding: 10px 0 18px; margin-bottom: -18px; }
.crit-sub { margin: -6px 0 14px; font-size: .85rem; color: var(--text-secondary); }
body.big .crit-sub { font-size: .95rem; }
.crit-note { font-size: .8rem; color: var(--text-secondary); margin: 12px 0 0; }
body.big .crit-note { font-size: .9rem; }
.crit-src { font-size: .78rem; color: var(--muted); margin: 12px 0 16px; }
.crit-src a { color: var(--accent); }
#critTable, #critBmiTable { width: 100%; }
#critTable th, #critTable td,
#critBmiTable th, #critBmiTable td { padding: 9px 4px; font-size: .88rem; }
body.big #critTable td, body.big #critTable th,
body.big #critBmiTable td, body.big #critBmiTable th { font-size: 1rem; }
#critTable td.lvl, #critBmiTable td.lvl { text-align: left; white-space: normal; line-height: 1.3; }
#critTable span.join { color: var(--muted); font-size: .74em; font-variant-numeric: normal; }
#critTable tr.hl, #critBmiTable tr.hl {
  background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
#critTable i.dot, #critBmiTable i.dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  vertical-align: 0; margin-right: 6px;
}

/* ---------- กราฟขยาย ---------- */

.chart-dialog[open] { display: flex; flex-direction: column; }
.chart-dialog { width: min(1100px, calc(100vw - 16px)); height: 92dvh;
  padding: 14px; overflow: hidden; }
.chart-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-dialog-head h3 { margin: 0; }
.chart-stage { position: relative; flex: 1; min-height: 0; margin-top: 6px; display: flex; }
.chart-stage > .chart { flex: 1; min-width: 0; margin-top: 0; }
.chart-axis { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  background: var(--surface-1); }
.chart-axis:empty { display: none; }
.chart.scrollx { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.chart.scrollx svg { touch-action: pan-x; }

/* ---------- สวิตช์เปิด/ปิดช่อง ---------- */

.togglerow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-top: 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--plane);
}
.tg-text { flex: 1; font-weight: 650; font-size: 1.02rem; }
body.big .tg-text { font-size: 1.12rem; }
.tg-switch {
  flex: none; width: 58px; height: 33px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--axis); background: var(--surface-1); padding: 0;
  position: relative; transition: background .15s, border-color .15s;
}
body.big .tg-switch { width: 66px; height: 38px; }
.tg-switch i {
  position: absolute; top: 3px; left: 3px; width: 25px; height: 25px;
  border-radius: 50%; background: var(--axis); transition: transform .15s, background .15s;
}
body.big .tg-switch i { width: 30px; height: 30px; }
.tg-switch[aria-checked="true"] { background: var(--good); border-color: var(--good); }
.tg-switch[aria-checked="true"] i { background: #fff; transform: translateX(25px); }
body.big .tg-switch[aria-checked="true"] i { transform: translateX(28px); }
.togglerow + .wheels { margin-top: 12px; }

.when {
  display: flex; align-items: center; gap: 12px;
  background: var(--plane); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 14px; margin-bottom: 2px;
}
.when > div { flex: 1; min-width: 0; }
.when-label { display: block; font-size: var(--label-fs); color: var(--text-secondary); font-weight: 550; }
.when-value { font-weight: 640; font-size: 1.1rem; margin-top: 2px; }
body.big .when-value { font-size: 1.3rem; }

.bigfield { display: block; flex: 1; min-width: 0; }
.bigfield > span { display: block; font-size: var(--label-fs); color: var(--text-secondary);
  font-weight: 550; margin-bottom: 5px; }
.bigfield input {
  width: 100%; text-align: center; font-size: var(--big-fs);
  font-weight: 620; letter-spacing: -.01em; padding: 6px 8px;
  min-height: calc(var(--field-h) + 16px);
  font-variant-numeric: tabular-nums;
}
.bigfield small { display: block; text-align: center; color: var(--muted);
  font-size: .78rem; margin-top: 4px; }
.bigfield.wide { margin-top: 12px; }

.bp { display: flex; align-items: flex-end; gap: 8px; }
.bp-slash { font-size: var(--big-fs); color: var(--axis); font-weight: 300;
  padding-bottom: calc(var(--field-h) * .28); }
.bp-hint { margin: 8px 0 0; min-height: 1.5em; font-size: .92rem; color: var(--text-secondary); }
body.big .bp-hint { font-size: 1rem; }

/* คำอธิบายสั้น ๆ ใต้ช่องกรอก */
.field-help {
  margin: 12px 0 0; text-align: center; line-height: 1.45;
  font-size: .82rem; color: var(--muted);
}
body.big .field-help { font-size: .92rem; }

.more { margin: 22px 0 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--plane); }
.more > summary {
  cursor: pointer; padding: 14px; font-weight: 600; font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: "＋"; color: var(--accent); font-weight: 700; font-size: 1.2em; flex: none;
}
.more[open] > summary::before { content: "－"; }
.more > summary small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; }
.more-body { padding: 0 14px 6px; }

.btn.save {
  width: 100%; margin-top: 22px; min-height: calc(var(--btn-h) + 14px);
  font-size: 1.1rem; border-radius: 12px;
}
body.big .btn.save { font-size: 1.3rem; }
.entry .btn.link { display: block; margin: 4px auto 0; text-align: center; }

/* จอกว้าง: ไม่ปล่อยให้ช่องกรอกยืดจนอ่านยาก */
@media (min-width: 620px) {
  .when, .bp, .bigfield.wide, .btn.save, .entry .btn.link, .more { max-width: 460px; }
  .entry .btn.link { margin-left: 0; margin-right: auto; }
}

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
body.big table { font-size: 1rem; }
th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
body.big th, body.big td { padding: 11px 12px; }
th { color: var(--muted); font-weight: 600; font-size: .76rem; text-align: right;
  border-bottom: 1px solid var(--axis); }
body.big th { font-size: .88rem; }
th:first-child, td:first-child { text-align: left; }
td.note-cell { white-space: normal; min-width: 120px; text-align: left;
  font-variant-numeric: normal; color: var(--text-secondary); }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ---------- charts ---------- */

.chart { margin-top: 4px; }
.chart-inner { position: relative; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem;
  color: var(--text-secondary); margin: 2px 0 6px; }
body.big .legend { font-size: .92rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--muted); }
.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: 9px 12px; font-size: .92rem; line-height: 1.45; white-space: nowrap;
  transform: translate(-50%, 0); opacity: 0; transition: opacity .1s;
}
body.big .tooltip { font-size: 1.04rem; }
.tooltip.on { opacity: 1; }
.tooltip b { font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); font-size: .9rem; padding: 22px 0; text-align: center; }

/* ---------- meds ---------- */

.med-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--grid);
}
.med-item > .btn { align-self: center; flex: none; }
.med-item:last-child { border-bottom: 0; }
.med-photo {
  width: 62px; height: 62px; border-radius: 10px; object-fit: cover; flex: none;
  border: 1px solid var(--border); background: var(--plane);
}
body.big .med-photo { width: 74px; height: 74px; }
.med-photo.ph { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .68rem; }
.med-body { flex: 1; min-width: 0; }
.med-body .nm { font-weight: 640; }
body.big .med-body .nm { font-size: 1.1rem; }
.med-meta { font-size: .86rem; color: var(--text-secondary); margin-top: 1px; }
body.big .med-meta { font-size: .95rem; }
.med-times { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.time-pill {
  font-size: .78rem; font-variant-numeric: tabular-nums; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--axis); color: var(--text-secondary);
}
body.big .time-pill { font-size: .9rem; padding: 3px 10px; }
.med-inactive { opacity: .55; }

/* today's checklist */
.dose-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--grid);
}
body.big .dose-item { padding: 15px 0; }
.dose-item:last-child { border-bottom: 0; }
.dose-time { font-variant-numeric: tabular-nums; font-weight: 640; width: 52px; flex: none; }
body.big .dose-time { font-size: 1.25rem; width: 66px; }
.dose-main { flex: 1; min-width: 0; }
.dose-main .nm { font-weight: 550; }
body.big .dose-main .nm { font-size: 1.15rem; }
.dose-item.done .dose-main { text-decoration: line-through; color: var(--muted); }
.dose-item.due .dose-time { color: var(--critical); }
.check {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 2px solid var(--axis); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
body.big .check { width: 52px; height: 52px; }
body.big .check svg { width: 26px; height: 26px; }
.check[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }
.check:disabled { opacity: .45; cursor: default; }
.check svg { width: 18px; height: 18px; }

/* ---------- login / setup ---------- */

.gate { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gate .card { max-width: 380px; width: 100%; margin: 0; }

/* ---------- misc ---------- */

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--text-primary); color: var(--plane);
  padding: 11px 18px; border-radius: 999px; font-size: .95rem; font-weight: 550;
  z-index: 60; opacity: 0; transition: opacity .18s; pointer-events: none;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.on { opacity: 1; }

dialog {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text-primary);
  padding: 18px; width: min(520px, calc(100vw - 28px)); box-shadow: var(--shadow);
  max-height: 88dvh; overflow: auto;
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h3 { margin: 0 0 14px; font-size: 1.05rem; }

.hairline { border: 0; border-top: 1px solid var(--grid); margin: 16px 0; }
.note-box {
  font-size: .82rem; color: var(--text-secondary); background: var(--plane);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
}
body.big .note-box { font-size: .92rem; }
.people-item { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
.people-item:last-child { border-bottom: 0; }
.people-item .nm { flex: 1; font-weight: 550; min-width: 120px; }
.people-item .un { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }

/* ---------- ปัดลงเพื่อรีเฟรช ---------- */

.ptr {
  position: fixed; top: -46px; left: 50%; transform: translate(-50%, 0);
  z-index: 70; display: none; align-items: center; gap: 9px;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 16px; font-size: .88rem; box-shadow: var(--shadow);
  pointer-events: none; white-space: nowrap;
}
body.big .ptr { font-size: 1rem; padding: 11px 18px; }
.ptr.on { display: inline-flex; }
.ptr.ready { color: var(--text-primary); border-color: var(--accent); }
.ptr-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--grid); border-top-color: var(--accent);
  transition: transform .15s;
}
.ptr.ready .ptr-spin { transform: rotate(180deg); }
.ptr.busy .ptr-spin { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.busy .ptr-spin { animation: none; } }

/* ---------- บัญชี ↔ คนในครอบครัว ---------- */

.scope-note {
  margin: 0; padding: 7px 16px 9px; font-size: .82rem;
  color: var(--text-secondary); background: var(--plane);
  border-top: 1px solid var(--border); text-align: center;
}
body.big .scope-note { font-size: .94rem; }
.scope-list {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 2px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--plane);
}
.scope-item { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; }
body.big .scope-item { font-size: 1.02rem; }
.scope-item input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- หน้าต่างแก้ไขรายการเดิม ---------- */

.edit-dialog .edit-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 1.02rem;
}
.edit-tag {
  background: var(--warning); color: #3a2a00; font-size: .74rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; flex: none;
}
body.big .edit-tag { font-size: .84rem; }
.edit-dialog { border-top: 4px solid var(--warning); }
.edit-orig {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.edit-orig-lbl { font-size: .74rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; }
.edit-dialog .bigfield input { text-align: center; }
.edit-dialog #editBmi { margin: 2px 0 14px; }

.version-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.big .version-line { font-size: .9rem; }
.version-line b { color: var(--text-secondary); font-weight: 650; }
.version-line .btn { margin-left: auto; }

/* ---------- ตัวเลขมีสีตามเกณฑ์ ----------
   ไม่ใช้สีแถบตรง ๆ เพราะเหลือง/ส้มอ่อนอ่านยากบนพื้นขาว
   ชุดนี้เลือกเฉดที่ contrast ผ่านทั้งพื้นสว่างและพื้นมืด                     */

:root {
  --v-info:     #1f5fa8;
  --v-good:     #0a7a24;
  --v-warning:  #9a6a00;
  --v-serious:  #b8531f;
  --v-critical: #c22b2b;
  --v-crisis:   #8c1414;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v-info:     #6aa8f0;
    --v-good:     #46c464;
    --v-warning:  #e3a93f;
    --v-serious:  #f28f5c;
    --v-critical: #f26b6b;
    --v-crisis:   #ff8a8a;
  }
}
:root[data-theme="dark"] {
  --v-info:     #6aa8f0;
  --v-good:     #46c464;
  --v-warning:  #e3a93f;
  --v-serious:  #f28f5c;
  --v-critical: #f26b6b;
  --v-crisis:   #ff8a8a;
}

.v { font-variant-numeric: tabular-nums; }
b.v { font-weight: 700; }
.v-info     { color: var(--v-info); }
.v-good     { color: var(--v-good); }
.v-warning  { color: var(--v-warning); }
.v-serious  { color: var(--v-serious); }
.v-critical { color: var(--v-critical); }
.v-crisis   { color: var(--v-crisis); }

/* ชื่อวันหน้าวันที่ */
.dow {
  display: inline-block; min-width: 2.1em; text-align: center;
  color: var(--text-secondary); font-weight: 650; font-size: .86em;
  background: var(--plane); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 5px; margin-right: 5px;
  font-variant-numeric: normal;
}
body.big .dow { font-size: .9em; }

/* คำอธิบายสีใต้ตาราง */
.colorkey {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: 12px 0 0; font-size: .78rem; color: var(--text-secondary);
}
body.big .colorkey { font-size: .88rem; }
.colorkey span { display: inline-flex; align-items: center; gap: 5px; }
.colorkey b { font-weight: 700; }
.colorkey .ck-dbp { color: var(--muted); font-variant-numeric: tabular-nums; }
.borrowed { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- เตือนเมื่ออัปไฟล์ไม่ครบ ---------- */

.staleban {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #7a1414; color: #fff;
  padding: 11px 16px; font-size: .86rem; line-height: 1.4;
}
.staleban div { flex: 1; min-width: 200px; }
.staleban b { display: block; font-weight: 650; }
.staleban span { display: block; opacity: .8; font-size: .92em; }
.staleban .btn { flex: none; background: #fff; color: #7a1414; border-color: #fff; font-weight: 650; }
body.has-staleban .topbar { top: 0; }

/* ---------- แถบสถานะเน็ต / ของที่รอส่ง ---------- */

.netban {
  flex: none; z-index: 40;
  background: var(--warning); color: #3d2a00;
  padding: 7px 16px; font-size: .84rem; line-height: 1.35; text-align: center; font-weight: 600;
}
.netban.sending { background: var(--accent); color: var(--accent-ink); }
body.big .netban { font-size: .94rem; padding: 9px 16px; }

tr.pending td { opacity: .72; }
.pending-tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  color: var(--muted); white-space: nowrap;
}
body.big .pending-tag { font-size: .82rem; }

/* ---------- ป้ายระดับที่กดได้ ---------- */

.badge.tap { cursor: pointer; font-family: inherit; gap: 5px; padding-right: 5px; }
.badge.tap:hover { border-color: var(--text-secondary); }
.badge.tap .q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--grid); color: var(--text-secondary);
  font-size: .72em; font-weight: 700; margin-left: 1px;
}
body.big .badge.tap .q { width: 18px; height: 18px; }

/* ไทล์: ป้ายระดับกับวันที่อยู่คนละบรรทัด */
.tile .sub .when-line { display: block; margin-top: 4px; }

/* หัวข้อย่อยในกล่องเกณฑ์ */
.crit-h { margin: 18px 0 6px; font-size: .95rem; font-weight: 700; }
#critBp .crit-h { margin-top: 4px; }
body.big .crit-h { font-size: 1.06rem; }

/* ---------- แถบบันทึกลอยเหนือแท็บ ---------- */

.savedock {
  flex: none; z-index: 45;
  background: var(--surface-1); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(11,11,11,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .savedock { box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
}
:root[data-theme="dark"] .savedock { box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
.savedock-inner {
  max-width: 900px; margin: 0 auto; padding: 9px 16px 11px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.savedock-val {
  flex: 1 1 140px; min-width: 120px; font-size: 1.02rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
body.big .savedock-val { font-size: 1.15rem; }
.savedock-val .u { color: var(--muted); font-weight: 500; font-size: .82em; }
.savedock .btn.save { flex: 0 0 auto; min-width: 140px; margin: 0; }
body.big .savedock .btn.save { min-width: 160px; }

/* ---------- กล่องยืนยันก่อนบันทึก ---------- */

#saveConfirm { width: min(420px, calc(100vw - 28px)); text-align: center; }
#saveConfirm h3 { margin-bottom: 6px; }
.save-for { margin: 0 0 14px; font-size: .9rem; color: var(--text-secondary); }
.save-preview {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  padding: 16px 12px; border-radius: 12px; background: var(--plane);
  border: 1px solid var(--border);
}
body.big .save-preview { font-size: 2.2rem; }
.save-preview .u { color: var(--muted); font-weight: 500; font-size: .5em; }
.save-when { margin: 10px 0 0; font-size: .92rem; }
#saveConfirm .btn-row { margin-top: 18px; flex-direction: column; }
#saveConfirm .btn-row .btn { width: 100%; }
.btn.save-ok { min-height: 56px; font-size: 1.1rem; font-weight: 650; }
body.big .btn.save-ok { min-height: 66px; font-size: 1.25rem; }
.save-preview .sub-line { display: block; font-size: .52em; font-weight: 600;
  color: var(--text-secondary); margin-top: 8px; }
body.big .save-preview .sub-line { font-size: .55em; }
#saveConfirmDup { text-align: left; background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.colorkey .ck-lbl { font-weight: 700; color: var(--text-secondary); }
.colorkey:empty { display: none; }
.keynote { margin: 10px 0 0; font-size: .78rem; color: var(--text-secondary); }
body.big .keynote { font-size: .88rem; }
.cronline {
  display: block; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; color: var(--text-secondary);
}
body.big .cronline { font-size: .84rem; }