/* nee — token ทั้งชุดของสมุดหนี้
 *
 * 🚨 นี่คือแหล่งเดียวของสี ระยะ ขนาดตัวอักษร และรัศมี
 *    ห้ามใส่ค่าสีหรือขนาดดิบในไฟล์อื่น ห้ามติดตั้ง CSS framework ใด ๆ
 *
 * ค่าโทนสีคัดลอกมาจาก kaichon เพราะเจ้าของเลือกไว้แล้วและคุ้นตาอยู่แล้ว
 * แต่เป็นสำเนา ไม่ใช่ของที่แชร์กัน — แก้เว็บหนึ่งแล้วอีกเว็บต้องไม่ขยับ
 *
 * ฟอนต์ใช้ของเครื่อง ไม่โฮสต์เอง ไม่เรียก CDN · สมุดหนี้ไม่ได้ต้องการหน้าตา
 * ที่เหมือนกันเป๊ะทุกเครื่อง และไฟล์ฟอนต์คือของที่ต้องดูแลต่อไปโดยไม่มีใครคอยดู
 *
 * โหมดมืดผ่าน prefers-color-scheme เท่านั้น ไม่มีสวิตช์ในแอป
 */

:root {
  --color-surface-base: #EDF1F4;
  --color-surface-raised: #FAFCFD;
  --color-surface-sunken: #E0E6EB;
  --color-ink-primary: #1C2227;
  --color-ink-secondary: #545F68;
  --color-accent: #12685B;
  --color-accent-ink: #FFFFFF;
  --color-danger: #A32020;
  --color-danger-surface: #F9E9E8;
  --color-attention-surface: #F9EFDD;
  --color-attention-ink: #6B3D00;
  --color-border-hairline: #DBE2E8;
  --color-border-strong: #737C84;

  --font-family: 'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, sans-serif;

  --text-amount-hero-size: 40px;
  --text-amount-size: 22px;
  --text-title-size: 22px;
  --text-body-size: 16px;
  --text-meta-size: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --rounded-sm: 12px;
  --rounded-md: 18px;

  --tap-target-min: 48px;
  --primary-action-height: 60px;
  --keypad-key-height: 60px;
  --content-max-width: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-base: #161A1E;
    --color-surface-raised: #202730;
    --color-surface-sunken: #101318;
    --color-ink-primary: #E9EEF2;
    --color-ink-secondary: #9AA5AE;
    --color-accent: #2FA189;
    --color-accent-ink: #05201B;
    --color-danger: #E8776E;
    --color-danger-surface: #361B19;
    --color-attention-surface: #33280F;
    --color-attention-ink: #E5C68C;
    --color-border-hairline: #2D343C;
    --color-border-strong: #78838D;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  /* ภาษาไทยมีสระบนและสระล่างซ้อนกันได้สองชั้น ต่ำกว่า 1.5 สระจะชนกันและอ่านผิด */
  line-height: 1.6;
  color: var(--color-ink-primary);
  background: var(--color-surface-base);
}

h1 { margin: 0; font-size: var(--text-title-size); font-weight: 600; line-height: 1.5; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* วงแหวนตอนโฟกัส — ใช้สีหมึกหลัก ไม่ใช่ฟ้าเริ่มต้นของเบราว์เซอร์ */
:focus-visible {
  outline: 2px solid var(--color-ink-primary);
  outline-offset: 2px;
}

/* ── โครงหน้า ─────────────────────────────────────────────────────── */

.shell {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }

.topbar {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-hairline);
}

.topbar__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.flash {
  max-width: var(--content-max-width);
  margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-attention-surface);
  color: var(--color-attention-ink);
  border-radius: var(--rounded-sm);
}

.notice {
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--rounded-sm);
}

.empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-ink-secondary);
}

.title { font-size: var(--text-title-size); }
.meta { font-size: var(--text-meta-size); color: var(--color-ink-secondary); }

/* ── ตัวเลขเงิน ───────────────────────────────────────────────────── */

/* 🚨 ตัวเลขเงินต้องเป็น tabular เสมอ ไม่งั้นหลักไม่ตรงกันในรายการที่เรียงลงมา
      แล้วการกวาดตาหาตัวเลขที่ผิดทำไม่ได้ */
.amount, .amount-hero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.amount { font-size: var(--text-amount-size); font-weight: 600; white-space: nowrap; }
.amount-quiet { color: var(--color-ink-secondary); font-weight: 500; }

.amount-hero {
  font-size: var(--text-amount-hero-size);
  font-weight: 700;
  line-height: 1.2;
}

/* ยอดติดลบในสมุดรับจ่ายส่วนตัว
   🚨 สีเป็นตัวช่วย ไม่ใช่ตัวบอก · เครื่องหมายลบกับคำว่า "ตอนนี้ลบอยู่" ต้องอยู่ครบเสมอ
      ลบสีนี้ออกแล้วหน้าจอต้องยังอ่านรู้เรื่องเท่าเดิม */
.amount-negative { color: var(--color-danger); }

/* ── รายการ ───────────────────────────────────────────────────────── */

.rows { display: flex; flex-direction: column; gap: var(--space-2); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
}

.row__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.row__name { font-weight: 600; }
.row__note { word-break: break-word; }
.row__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }

/* รายการที่ถูกยกเลิกยังต้องอ่านออก ห้ามจางจนหายไป — มันคือหลักฐานว่าเคยมีอะไร */
.row-voided { background: var(--color-surface-base); }
.row-voided .amount { text-decoration: line-through; }

.tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  font-size: var(--text-meta-size);
  font-weight: 400;
  color: var(--color-attention-ink);
  background: var(--color-attention-surface);
  border-radius: var(--rounded-sm);
}

.person-head { display: flex; flex-direction: column; gap: var(--space-1); }

.actions { display: flex; gap: var(--space-3); }
.actions .btn { flex: 1; }

/* ── การ์ดเมนูหน้าแรก ─────────────────────────────────────────────── */

/* ทั้งการ์ดกดได้ ไม่ใช่แค่ปุ่มเล็ก ๆ ข้างใน — เป็นเป้าที่ใหญ่ที่สุดในแอป
   เพราะเป็นสิ่งแรกที่ต้องกดทุกครั้งหลังใส่ PIN */
.menu-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-md);
}

.menu-card__go {
  margin-top: var(--space-3);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  min-height: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: var(--rounded-sm);
}

/* ── หัวสรุปยอดรวมบนหน้ารายชื่อ ───────────────────────────────────── */

.summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
}

/* ── รายการให้ติ๊กตอนรับเงิน ──────────────────────────────────────── */

.picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.picks legend { padding: 0 0 var(--space-2); }

/* ทั้งแถวกดได้ ไม่ใช่แค่ช่องสี่เหลี่ยมเล็ก ๆ — นิ้วโป้งบนมือถือเล็งไม่ได้ขนาดนั้น */
.pick {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
  cursor: pointer;
}

.pick input[type="checkbox"],
.pick input[type="radio"] {
  /* ขนาดค่าเริ่มต้นของเบราว์เซอร์เล็กเกินกว่าจะกดถูกตอนถือของอีกมือ */
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--color-accent);
}

.pick__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.pick__note { font-weight: 600; word-break: break-word; }

.pick:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-surface-sunken);
}

.picked-total {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  background: var(--color-attention-surface);
  color: var(--color-attention-ink);
  border-radius: var(--rounded-sm);
}

/* ── ปุ่ม ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-body-size);
  font-weight: 600;
  /* ทุกอย่างที่กดได้มีขอบของตัวเองเสมอ — จอมือถือราคาถูกในที่แสงน้อยมองเงาไม่เห็น */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-sm);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  cursor: pointer;
}

.btn-block { width: 100%; min-height: var(--primary-action-height); }

.btn-emphasis {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

.btn-secondary { background: var(--color-surface-raised); }

.btn-quiet {
  min-height: auto;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-meta-size);
  font-weight: 400;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.btn-danger { color: var(--color-danger); }

/* ── ฟอร์ม ────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--space-1); }

.input {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  /* 🚨 ต่ำกว่า 16px iOS จะซูมหน้าจอเองตอนกดช่องกรอก แล้วเลย์เอาต์เพี้ยนทั้งหน้า */
  font-size: var(--text-body-size);
  color: var(--color-ink-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-sm);
}

.input-amount {
  font-size: var(--text-amount-hero-size);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── แป้น PIN ─────────────────────────────────────────────────────── */

.login { max-width: 360px; margin: var(--space-7) auto 0; text-align: center; }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.key {
  min-height: var(--keypad-key-height);
  font-family: inherit;
  font-size: var(--text-amount-size);
  font-weight: 600;
  color: var(--color-ink-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--rounded-sm);
  cursor: pointer;
}

.key-quiet { font-size: var(--text-body-size); font-weight: 400; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .key, .input { transition: background-color 120ms ease, border-color 120ms ease; }
}

/* ── ตารางตัวเลขของ lotto ─────────────────────────────────────────────
   🚨 ตัวเลขต้องใช้ฟอนต์ที่ความกว้างเท่ากันทุกตัว (tabular) มิฉะนั้นคอลัมน์
      เปอร์เซ็นต์จะเยื้องกันจนเทียบด้วยตาไม่ได้
   🚨 แถวที่แนะนำใช้ "เส้นขอบซ้ายหนา" ไม่ใช่สีพื้น เพราะเจ้าของตาบอดสี
      และทุกแถวมีคำว่า "แทงได้ / ห้ามแทง" กำกับอยู่ในคอลัมน์สรุปแล้ว */
.grid { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.grid th, .grid td { padding: 0.5rem 0.4rem; border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 15%, transparent); text-align: left; vertical-align: top; }
.grid th { font-weight: 600; white-space: nowrap; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid .small { font-size: 0.8rem; }
.grid .row-pick td { border-left: 4px solid currentColor; }
.grid .row-pick td:not(:first-child) { border-left: 0; }
.grid tbody tr:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
@media (max-width: 640px) {
  /* บนมือถือให้เลื่อนตารางได้แทนการบีบคอลัมน์จนอ่านไม่ออก */
  .grid { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── ตารางสรุป "งวดถัดไปแทงอะไร" ─────────────────────────────────────
   🚨 เจ้าของตาบอดสี — ช่องที่ต้องแทงบอกด้วย 3 อย่างพร้อมกัน ไม่ใช่สี:
      1. เลขตัวใหญ่ (ช่องที่ไม่แทงเป็นขีดจาง)
      2. กรอบหนารอบช่อง
      3. คำว่า "แทง" ใต้เลข
   ลบอย่างใดอย่างหนึ่งออกแล้วตารางนี้จะอ่านไม่ได้ทันทีสำหรับคนที่แยกสีไม่ออก */
.betgrid { width: 100%; border-collapse: separate; border-spacing: 4px; margin: 0.5rem 0 1rem; }
.betgrid th { font-size: 0.8rem; font-weight: 600; opacity: 0.7; padding: 0.2rem; text-align: center; }
.betgrid th:first-child, .betgrid td:first-child { text-align: left; width: 3.5rem; }
.betgrid td { text-align: center; padding: 0.4rem 0.2rem; vertical-align: middle; }
.betgrid__prize { font-size: 1.5rem; font-weight: 700; }
.betgrid__hit {
  border: 3px solid currentColor;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.betgrid__skip { border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 10px; }
.betgrid__digit {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  padding: 0 0.15em;
}
.betgrid__word { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; }
.betgrid__dash { font-size: 1.6rem; opacity: 0.3; }
.betgrid .num { font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; width: 6rem; }

/* ── ตาราง "ทุกตำแหน่ง ตัวไหนดีที่สุด" ───────────────────────────────
   🚨 เจ้าของตาบอดสี · ขอมาเป็น เขียว/ขาว/แดง แต่เขียว-แดงคือคู่ที่แยกไม่ออก
      มากที่สุดในภาวะตาบอดสีที่พบบ่อย (deuteranopia/protanopia)
      จึงใช้ ฟ้า / ปกติ / แดงส้ม ซึ่งต่างกันทั้งสีและความสว่าง แยกออกทุกแบบ

   ทุกช่องมีครบสามอย่างเสมอ ห้ามลดเหลือแต่สี:
      1. ตัวเลข % อยู่ในช่อง
      2. คำกำกับ (แทงได้ / ยังไม่พอ / ห้ามแทง)
      3. เส้นขอบคนละแบบ (ทึบหนา / ทึบบาง / ประ)                             */
.betgrid--all td.cell { padding: 0.35rem 0.15rem; border-radius: 10px; }
.cell__digit { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cell__pct   { display: block; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.cell__word  { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; opacity: 0.85; }

.cell--good { border: 3px solid #4da3ff; background: color-mix(in srgb, #4da3ff 14%, transparent); }
.cell--good .cell__digit, .cell--good .cell__pct { color: #4da3ff; }
.cell--mid  { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.cell--bad  { border: 2px dashed #ff7a66; background: color-mix(in srgb, #ff7a66 10%, transparent); }
.cell--bad .cell__digit, .cell--bad .cell__pct { color: #ff7a66; }

@media (prefers-color-scheme: light) {
  .cell--good { border-color: #0b63c5; background: color-mix(in srgb, #0b63c5 10%, transparent); }
  .cell--good .cell__digit, .cell--good .cell__pct { color: #0b63c5; }
  .cell--bad  { border-color: #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); }
  .cell--bad .cell__digit, .cell--bad .cell__pct { color: #c0392b; }
}

.legend { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.82rem; margin: 0.5rem 0 1rem; }
.legend__item { display: flex; align-items: center; gap: 0.5rem; }
.legend__swatch { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; font-size: 0.75rem; }

.explain { margin: 0.5rem 0 1.5rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 10px; padding: 0.6rem 0.9rem; }
.explain summary { cursor: pointer; font-weight: 600; }
.explain p { font-size: 0.88rem; line-height: 1.6; }
.explain .grid { font-size: 0.85rem; margin: 0.6rem 0; }