/* ==========================================================================
   AMS49 CMU · Reunion 20 ปี — System Contract
   Thesis: "Verified Ledger" — สลิปที่ตรวจแล้วคือวัตถุดิบหลัก
   Grid: quiet. มองเห็นเป็น alignment + hairline rule ในบัญชีเท่านั้น
   ========================================================================== */

/* --- Foundation tokens ---------------------------------------------------- */
:root {
  /* palette — สกัดจาก ams_logo.png + สกรีนหน้าอก + เสื้อจริง */
  --navy-900: #0E1830;
  --navy-800: #1B2C55;
  --navy-700: #2E4A87;  /* AMS wordmark navy — สีหลัก */
  --navy-600: #3A5A9E;
  --navy-100: #E7ECF6;
  --navy-050: #F2F5FB;

  --print-blue: #1141AB; /* สีสกรีนหน้าอกเสื้อ — ใช้กับ focus ring + ตัวเลขยอดรวม */

  --purple-600: #7B5C9B;
  --purple-500: #9B7BB8; /* CMU purple — accent โดเมนเสื้อเท่านั้น */
  --purple-100: #F0E9F6;

  --paper:     #F6F7FA;
  --surface:   #FFFFFF;
  --surface-2: #FAFBFD;

  --ink:       #14192B;
  --ink-muted: #5A6478;
  --ink-faint: #8A93A5;

  --line:        #DFE3EB;  /* hairline — motif เส้นไปป์จากเสื้อ */
  --line-strong: #BFC7D6;

  /* status — ใช้คู่กับ icon เสมอ ไม่พึ่งสีอย่างเดียว */
  --pending-fg: #8A5200;  --pending-bg: #FDF3E2;  --pending-line: #E9C77F;
  --verified-fg:#0F6B48;  --verified-bg:#E4F3EC;  --verified-line:#98CDB4;
  --reject-fg:  #A32217;  --reject-bg:  #FCEBE9;  --reject-line: #E7A9A2;

  /* spacing rhythm — base 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* shape — เตี้ยและคม แบบเอกสารสถาบัน */
  --r-sm:4px; --r-md:6px; --r-lg:10px;

  /* depth — มีแค่ 2 ระดับ การกั้นพื้นที่ใช้ border ไม่ใช่เงา */
  --shadow-sticky: 0 1px 0 var(--line), 0 4px 14px -10px rgba(14,24,48,.28);
  --shadow-float:  0 12px 32px -12px rgba(14,24,48,.34), 0 0 0 1px var(--line);

  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* type */
  --f-display: 'Graduate', 'Arial Black', 'Impact', sans-serif;
  --f-ui: 'IBM Plex Sans Thai', 'Noto Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --f-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

  --container: 1140px;
  --gutter: var(--s5);
}

@media (max-width: 640px) { :root { --gutter: var(--s4); } }

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'tnum' 1; /* tabular figures ทั้งระบบ — ตัวเลขต้องเรียงตรงคอลัมน์ */
  -webkit-font-smoothing: antialiased;
  /* กันคำยาว (รหัส/ชื่อไฟล์สลิป/URL) ดันหน้าจนเลื่อนแนวนอนบนมือถือ */
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,p,figure { margin: 0; }
a { color: var(--navy-700); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--print-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--navy-700); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--r-md); text-decoration: none;
}
.skip:focus { top: var(--s4); }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- Type roles ----------------------------------------------------------- */
.wordmark {
  font-family: var(--f-display);
  font-size: 1.0625rem; letter-spacing: .07em;
  color: var(--navy-700); line-height: 1;
}
.total-figure {
  font-family: var(--f-display);
  font-size: clamp(3.25rem, 11vw, 6.25rem);
  line-height: .92; letter-spacing: -.005em;
  color: var(--print-blue);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted);
}
h1, .h1 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.3125rem; font-weight: 600; line-height: 1.35; }
h3, .h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.body  { max-width: 62ch; }
.meta  { font-size: .8125rem; color: var(--ink-muted); }
.mono  { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num   { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --- Layout --------------------------------------------------------------- */
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section { padding-block: var(--s7); }
.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s6); }
/* hidden ต้องชนะทุก class ที่ตั้ง display (เช่น .drop-preview{display:flex}) */
[hidden] { display: none !important; }

.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
/* checkbox/radio + ข้อความยาว — ข้อความต้องอยู่บรรทัดเดียวกับกล่อง ไม่ตกลงมา */
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.check input { margin: 4px 0 0; }
.row-between { display:flex; gap:var(--s4); align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.grow { flex: 1 1 auto; }

/* --- Prototype banner ----------------------------------------------------- */
.proto-bar {
  background: repeating-linear-gradient(135deg, #2B2F3A 0 10px, #242831 10px 20px);
  color: #fff; font-size: .8125rem; padding: var(--s2) 0;
}
.proto-bar strong { letter-spacing: .04em; }
.proto-bar .wrap { display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: var(--shadow-sticky);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 62px; }
.brand-lock { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex: 0 0 auto; }
.brand-lock img { height: 30px; width: auto; }
.brand-lock .sep { width:1px; height:26px; background: var(--line); }
.brand-lock .yr { font-size:.75rem; color: var(--ink-muted); line-height:1.15; }

.nav { display: flex; gap: var(--s1); margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  font-size: .9375rem; text-decoration: none; color: var(--ink-muted);
  border: 1px solid transparent;
}
.nav a:hover { color: var(--navy-700); background: var(--navy-050); }
.nav a[aria-current="page"] { color: var(--navy-800); background: var(--navy-100); font-weight: 600; }
.nav a.admin-link { color: var(--ink-faint); }

@media (max-width: 860px) {
  .site-head .wrap { flex-wrap: wrap; gap: var(--s3); padding-block: var(--s3); min-height: 0; }
  .nav {
    width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* แถบเมนูเลื่อนได้แต่ไม่โชว์ scrollbar */
    scroll-snap-type: x proximity;
    /* จางที่ขอบขวา = สัญญาณว่ายังเลื่อนต่อได้ */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; scroll-snap-align: start; }
  .brand-lock .yr { font-size: .6875rem; }
}
@media (max-width: 380px) {
  .brand-lock img { height: 26px; }
  .wordmark { font-size: .9375rem; }
}
/* มือถือแนวนอน จอเตี้ย — header ที่ปักหมุดกินพื้นที่เกินไป */
@media (max-height: 480px) and (orientation: landscape) {
  .site-head { position: static; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-h: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--btn-h); padding: 0 var(--s4);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn-lg { --btn-h: 50px; padding-inline: var(--s5); font-size: 1rem; }
.btn-sm { --btn-h: 34px; padding-inline: var(--s3); font-size: .875rem; }
.btn-primary   { background: var(--navy-700); color: #fff; }
.btn-primary:hover   { background: var(--navy-800); }
.btn-primary:active  { background: var(--navy-900); }
.btn-secondary { background: var(--surface); color: var(--navy-700); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--navy-700); background: var(--navy-050); }
.btn-quiet     { background: transparent; color: var(--ink-muted); }
.btn-quiet:hover { background: var(--navy-050); color: var(--navy-700); }
.btn-danger    { background: var(--surface); color: var(--reject-fg); border-color: var(--reject-line); }
.btn-danger:hover { background: var(--reject-bg); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: #EDF0F5; color: var(--ink-faint); border-color: var(--line);
  cursor: not-allowed;
}
.btn[data-loading="true"] { pointer-events: none; opacity: .75; }
.btn[data-loading="true"] .btn-spin { display: inline-block; }
.btn-spin {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) { .btn { --btn-h: 46px; } }

/* --- Surfaces ------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.panel-pad { padding: var(--s5); }
.panel-head {
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.panel-navy { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.panel-navy .meta { color: #B9C6E0; }

/* --- Status badge — icon + คำ ไม่พึ่งสีอย่างเดียว ------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--s2) 2px 6px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  border: 1px solid;
}
.badge svg { width: 13px; height: 13px; flex: none; }
.badge-pending  { color: var(--pending-fg);  background: var(--pending-bg);  border-color: var(--pending-line); }
.badge-verified { color: var(--verified-fg); background: var(--verified-bg); border-color: var(--verified-line); }
.badge-rejected { color: var(--reject-fg);   background: var(--reject-bg);   border-color: var(--reject-line); }
.badge-shirt    { color: var(--purple-600);  background: var(--purple-100);  border-color: #DCCBE8; }

/* --- Hairline stat strip (แทน card ซ้ำ ๆ) --------------------------------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat-strip > div { padding: var(--s4) var(--s5) var(--s4) 0; }
.stat-strip > div + div { border-left: 1px solid var(--line); padding-left: var(--s5); }
.stat-k { font-size: .8125rem; color: var(--ink-muted); }
.stat-v { font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .stat-strip > div { padding-inline: 0; }
}

/* --- Goal meter — เส้นบาง ไม่ใช่แท่งอ้วนมน ------------------------------- */
.meter { height: 6px; background: var(--navy-100); border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--navy-700); border-radius: 999px;
  transition: width var(--dur-3) var(--ease); }

/* --- Ledger --------------------------------------------------------------- */
.ledger { width: 100%; border-collapse: collapse; }
.ledger caption { text-align: left; padding: 0 0 var(--s3); color: var(--ink-muted); font-size: .8125rem; }
.ledger th {
  text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.ledger td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger tbody tr:hover { background: var(--navy-050); }
.ledger .c-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ledger .c-time { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-muted); white-space: nowrap; }
.ledger .c-ref  { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-faint); }
.ledger tr[data-new="true"] { animation: rowIn var(--dur-3) var(--ease); }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(-6px); background: var(--verified-bg); }
  to   { opacity: 1; transform: none; }
}

.ledger .c-phone { font-family: var(--f-mono); font-size: .8125rem; }
.ledger .c-slip  { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-faint); }
.ledger .c-act   { text-align: right; }

/* narrow container → 2 บรรทัด แต่ยอดเงินยังชิดขวาเสมอ
   ใช้เฉพาะตารางที่ติด .ledger-cards — ตารางไซส์เสื้อคอลัมน์สั้น พลิกเป็นการ์ดแล้วตัวเลขทับกัน */
@media (max-width: 720px) {
  .ledger-cards thead { display: none; }
  /* minmax(0,1fr) ไม่ใช่ 1fr — ข้อความไทยยาว ๆ (เหตุผลที่ตีกลับ) ไม่มีช่องว่างให้ตัดบรรทัด
     min-content จึงเท่ากับความยาวทั้งประโยค แล้วดันตารางกว้างเกินจอ
     (overflow-wrap:break-word กันข้อความล้นให้ แต่ไม่ได้ลด min-content) */
  .ledger-cards tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px var(--s3);
    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .ledger-cards td { border: 0; padding: 0; }
  .ledger-cards .c-time   { grid-column: 1; grid-row: 1; }
  .ledger-cards .c-amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.0625rem; }
  .ledger-cards .c-status { grid-column: 1; grid-row: 2; }
  .ledger-cards .c-ref    { grid-column: 1; grid-row: 3; }
}

/* --- Admin ledger — 10 คอลัมน์ ไม่มีทางย่อลงจอมือถือได้ จึงพลิกเป็นการ์ด --- */
@media (min-width: 1001px) {
  .ledger-admin { min-width: 960px; }   /* 1001px ขึ้นไป = เนื้อที่ใน .wrap เกิน 960 → ตารางเต็มไม่ต้องเลื่อนข้าง */
}
/* สามคอลัมน์เงินอยู่ติดกัน กั้นด้วยเส้นบาง ๆ ให้อ่านเป็นกลุ่มเดียว */
.ledger-admin .c-don, .ledger-admin .c-shirtamt {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-muted);
}
.ledger-admin .c-don { border-left: 1px solid var(--line); }
.ledger-admin thead .c-don { border-left: 1px solid var(--line); }
/* รหัสอ้างอิงกับปุ่มห้ามตัดบรรทัด — อ่านผิดง่ายและกินความสูงแถวโดยเปล่าประโยชน์ */
.ledger-admin .c-ref { white-space: nowrap; }
.ledger-admin .c-act .btn { white-space: nowrap; }
@media (max-width: 1000px) {
  .ledger-admin thead { display: none; }
  .ledger-admin tbody tr {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--s3); padding: var(--s4);
    border-bottom: 1px solid var(--line);
  }
  .ledger-admin tbody tr:hover { background: transparent; }
  .ledger-admin td { border: 0; padding: 0; min-width: 0; }
  /* หัวคอลัมน์เดิมกลับมาเป็น label ของแต่ละช่อง */
  .ledger-admin td[data-l]::before {
    content: attr(data-l);
    display: block; margin-bottom: 1px;
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .ledger-admin .c-ref    { grid-column: 1; grid-row: 1; font-size: .9375rem; color: var(--ink); }
  .ledger-admin .c-amount { grid-column: 2; grid-row: 1; text-align: right; font-size: 1.125rem; }
  .ledger-admin .c-name   { grid-column: 1 / -1; grid-row: 2; }
  .ledger-admin .c-phone  { grid-column: 1; grid-row: 3; }
  .ledger-admin .c-time   { grid-column: 2; grid-row: 3; white-space: normal; }
  .ledger-admin .c-status { grid-column: 1; grid-row: 4; }
  .ledger-admin .c-shirt  { grid-column: 2; grid-row: 4; }
  /* เงินสองก้อนย่อยอยู่แถวเดียวกัน ใต้ยอดรวม — บนการ์ดไม่ต้องชิดขวา เพราะมี label กำกับอยู่แล้ว */
  .ledger-admin .c-don      { grid-column: 1; grid-row: 5; text-align: left; border-left: 0; }
  .ledger-admin .c-shirtamt { grid-column: 2; grid-row: 5; text-align: left; }
  .ledger-admin .c-act    { grid-column: 1 / -1; grid-row: 6; text-align: left; }
  .ledger-admin .c-act .btn { width: 100%; }
  .ledger-admin .c-name .meta,
  .ledger-admin .c-status .meta { max-width: none !important; }
}

/* --- Filter chips --------------------------------------------------------- */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  padding: 5px var(--s3); border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); font-size: .875rem; cursor: pointer; color: var(--ink-muted);
}
.chip:hover { border-color: var(--navy-700); color: var(--navy-700); }
.chip[aria-pressed="true"] {
  background: var(--navy-700); border-color: var(--navy-700); color: #fff; font-weight: 600;
}
/* นิ้วโป้งต้องกดโดน — 30px สูงไม่พอบนจอสัมผัส */
@media (pointer: coarse) {
  .chip { padding: 9px var(--s4); }
  .nav a { padding: 10px var(--s3); }
}

/* --- Admin toolbar -------------------------------------------------------- */
.admin-tools { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; width: 100%; }
.admin-tools .chips { min-width: 0; }
.admin-tools .search { max-width: 230px; }
@media (max-width: 860px) {
  .admin-tools { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
  .admin-tools .grow { display: none; }
  .admin-tools .chips {
    overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px;
    scrollbar-width: none; margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4);
  }
  .admin-tools .chips::-webkit-scrollbar { display: none; }
  .admin-tools .chip { white-space: nowrap; }
  .admin-tools .search { max-width: none; }
  .admin-tools .tool-btns { display: flex; gap: var(--s3); }
  .admin-tools .tool-btns .btn { flex: 1; }
  .panel-head { padding-inline: var(--s4); }
}

/* --- Copy field — งานหลักของหน้าบริจาค ----------------------------------- */
.copyfield { display: grid; gap: var(--s2); }
.copyfield .cf-label { font-size: .8125rem; color: var(--ink-muted); font-weight: 500; }
.copyfield .cf-row {
  display: flex; align-items: stretch; gap: var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--dur-1) var(--ease);
}
.copyfield .cf-row:hover { border-color: var(--navy-600); }
.copyfield .cf-val {
  flex: 1 1 auto; padding: var(--s3) var(--s4); min-width: 0;
  font-family: var(--f-mono); font-size: 1.25rem; font-weight: 500;
  letter-spacing: .04em; word-break: break-all; user-select: all;
}
.copyfield .cf-val[data-plain] { font-family: var(--f-ui); font-size: 1rem; letter-spacing: 0; }
.copyfield .cf-btn {
  flex: 0 0 auto; border: 0; border-left: 1px solid var(--line); background: var(--surface-2);
  padding: 0 var(--s4); cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--navy-700);
  border-radius: 0 var(--r-md) var(--r-md) 0; display: flex; align-items: center; gap: 6px;
}
.copyfield .cf-btn:hover { background: var(--navy-100); }
.copyfield .cf-btn[data-state="copied"] { background: var(--verified-bg); color: var(--verified-fg); }
.copyfield .cf-btn[data-state="failed"] { background: var(--reject-bg); color: var(--reject-fg); }
@media (max-width: 560px) {
  .copyfield .cf-row { flex-direction: column; }
  .copyfield .cf-btn { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md);
    justify-content: center; padding-block: var(--s3); }
  .copyfield .cf-val { font-size: 1.125rem; }
}

/* --- Form fields ---------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field > label { font-size: .875rem; font-weight: 600; }
.field .hint { font-size: .8125rem; color: var(--ink-muted); }
.field .req { color: var(--reject-fg); }
.input, .select, .textarea {
  width: 100%; padding: 10px var(--s3); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-600); }
/* readonly = ค่าถูกล็อกให้ตามช่องอื่น (เช่น ผู้รับ = ผู้บริจาค) ไม่ใช่ disabled
   ต้องดูต่างจากช่องที่พิมพ์ได้ ไม่งั้นผู้ใช้พิมพ์แล้วไม่ขึ้นจะงงว่าเว็บพัง */
.input[readonly], .textarea[readonly] {
  background: var(--surface-2); color: var(--ink-muted); cursor: not-allowed;
}
.input[readonly]:hover, .textarea[readonly]:hover { border-color: var(--line-strong); }
.textarea { min-height: 92px; resize: vertical; }
.input[inputmode="numeric"], .input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--reject-fg); background: #FFFCFC; }
.field .err { display: none; align-items: center; gap: 6px; font-size: .8125rem; color: var(--reject-fg); font-weight: 500; }
.field[data-invalid="true"] .err { display: flex; }
.field .err svg { width: 14px; height: 14px; flex: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- Slip dropzone -------------------------------------------------------- */
.drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2); padding: var(--s6) var(--s4); text-align: center;
  cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.drop:hover, .drop[data-state="over"] { border-color: var(--navy-700); background: var(--navy-050); }
.drop[data-state="filled"] { border-style: solid; border-color: var(--verified-line); background: var(--verified-bg); text-align: left; }
.drop[data-state="error"]  { border-style: solid; border-color: var(--reject-fg); background: var(--reject-bg); }
.drop-preview { display: flex; gap: var(--s4); align-items: center; }
.drop-preview img { width: 74px; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background:#fff; }

/* --- Steps ---------------------------------------------------------------- */
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.steps li { flex: 1 1 0; padding: var(--s3) var(--s4); font-size: .875rem; color: var(--ink-muted);
  display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.steps li + li { border-left: 1px solid var(--line); }
.steps li b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-100);
  color: var(--navy-700); font-size: .75rem; display: grid; place-items: center; }
.steps li[aria-current="step"] { background: var(--navy-050); color: var(--navy-800); font-weight: 600; }
.steps li[aria-current="step"] b { background: var(--navy-700); color: #fff; }
.steps li[data-done="true"] b { background: var(--verified-fg); color: #fff; }
.steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ขั้นที่ทำผ่านไปแล้วต้องกดย้อนกลับไปแก้ได้ — ทำทั้งช่องเป็นปุ่ม ไม่ใช่ลิงก์เล็ก ๆ ในช่อง
   ขั้นที่ยังไปไม่ถึงใส่ disabled ไว้ ไม่ใช่ซ่อน เพื่อให้เห็นว่าเหลืออีกกี่ขั้น */
.steps li > button {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-width: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  background: transparent; border: 0; cursor: pointer;
}
.steps li > button:disabled { cursor: default; }
.steps li[data-done="true"]:has(button:enabled):hover { background: var(--verified-bg); }
@media (max-width: 620px) {
  .steps { flex-direction: column; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .steps li span { white-space: normal; }
}

/* --- Timeline (หน้าเช็คสถานะ) --------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s4); padding-bottom: var(--s5); position: relative; }
.timeline li:not(:last-child)::before {
  content: ''; position: absolute; left: 10px; top: 24px; bottom: 0; width: 1.5px; background: var(--line);
}
.timeline li[data-done="true"]:not(:last-child)::before { background: var(--verified-line); }
.timeline .dot { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--surface); display: grid; place-items: center; z-index: 1; }
.timeline li[data-done="true"] .dot { background: var(--verified-fg); border-color: var(--verified-fg); color: #fff; }
.timeline li[data-current="true"] .dot { border-color: var(--pending-line); background: var(--pending-bg); color: var(--pending-fg); }
.timeline .dot svg { width: 12px; height: 12px; }

/* --- Quantity stepper ------------------------------------------------------
   สั่งเสื้อได้ไม่จำกัดจำนวน ช่องกลางจึงต้อง "พิมพ์ได้" ไม่ใช่ <output> อ่านอย่างเดียว
   — กด + ยี่สิบครั้งไม่ไหว ส่วนการกันพิมพ์พลาดไปอยู่ที่ clampQty() ใน app.js แทน */
.qty-stepper { display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.qty-stepper button {
  font: inherit; font-size: 1.25rem; line-height: 1; font-weight: 500;
  width: 40px; height: 40px; flex: none;
  appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--navy-700);
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease);
}
.qty-stepper button:hover:not(:disabled) { background: var(--navy-050); }
.qty-stepper button:disabled { color: #C7CDD9; cursor: not-allowed; }
.qty-stepper button:focus-visible { outline: 2px solid var(--print-blue); outline-offset: -2px; }
.qty-stepper input {
  width: 3.5ch; min-width: 3.5ch; padding: 0; text-align: center;
  font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  appearance: none; background: transparent; border: 0; border-radius: var(--r-sm);
}
.qty-stepper input:focus-visible { outline: 2px solid var(--print-blue); outline-offset: 0; }
@media (pointer: coarse) { .qty-stepper button { width: 44px; height: 44px; } }

/* --- Size × quantity table -------------------------------------------------
   หนึ่งแถวต่อหนึ่งไซส์ — อ่านเป็นตารางไซส์ได้ในตัว ไม่ต้องเปิดตารางเทียบแยก
   แถวที่สั่งไว้ย้อมพื้น + ขึ้นยอดย่อยใต้ชื่อไซส์ ให้เห็นว่ากดอะไรไปแล้วบ้างโดยไม่ต้องไล่อ่านทุกแถว */
.qty-table { width: 100%; border-collapse: collapse; }
.qty-table th, .qty-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.qty-table thead th {
  text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.qty-table tbody th { text-align: left; font-weight: 400; }
.qty-table tbody th b { font-size: 1rem; font-weight: 700; }
.qty-table .qt-sub { display: block; font-size: .75rem; color: var(--purple-600); font-weight: 600; }
.qty-table .qt-dim { font-size: .875rem; color: var(--ink-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.qty-table .qt-n { text-align: right; width: 1%; white-space: nowrap; }
.qty-table thead .qt-n { text-align: right; }
.qty-table tr[data-on="true"] { background: var(--purple-100); }
.qty-table tr[data-on="true"] .qty-stepper { border-color: var(--purple-500); }
/* ป้ายส่วนเพิ่มราคาข้างรหัสไซส์ (2XL ขึ้นไป) — ต้องเห็นก่อนกดเลือก ไม่ใช่ไปเจอตอนสรุปยอด
   ใช้ป้ายแทนคอลัมน์ "ราคา" เพราะตารางนี้ต้องรอดที่จอ 320px */
.qty-table .qt-plus {
  margin-left: 6px; font-size: .75rem; font-weight: 600; color: var(--purple-600);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* จอแคบ: ตัดคอลัมน์ขนาดทิ้งทีละใบตามลำดับความสำคัญ เพื่อให้ตัวนับไม่โดนบีบ
   ไหล่ไปก่อน (ใช้เลือกไซส์น้อยสุด) แล้วค่อยความยาว — รอบอกอยู่ถึงที่สุด */
@media (max-width: 620px) {
  .qty-table .qt-sh { display: none; }
}
@media (max-width: 520px) {
  .qty-table .qt-len { display: none; }
  .qty-table th, .qty-table td { padding-inline: var(--s2); }
}
/* 320px คือจอที่แคบที่สุดที่รองรับ — ตารางนี้เป็นตัวกำหนด min-content ของทั้งหน้า
   ถ้าปล่อยให้กว้างเกิน หน้าจะเลื่อนแนวนอนได้ทั้งหน้า ไม่ใช่แค่ตาราง */
@media (max-width: 360px) {
  .qty-table th, .qty-table td { padding-inline: 6px; padding-block: 6px; }
  .qty-table .qt-dim { font-size: .8125rem; }
  .qty-table .qt-sub { font-size: .6875rem; }
  .qty-stepper button { width: 36px; height: 36px; font-size: 1.125rem; }
  .qty-stepper input { width: 2.5ch; min-width: 2.5ch; font-size: 1rem; }
}

/* --- Payment slate ---------------------------------------------------------
   บัญชีร่วมสองชื่อผูกพร้อมเพย์ไม่ได้ จึงไม่มีวันมี QR — ทุกคนต้องพิมพ์ยอดเอง
   ยอดที่ต้องโอนจึงต้องเป็นของที่ใหญ่ที่สุดในหน้า และคัดลอกได้ในคลิกเดียว */
.pay-slate { padding: var(--s6) var(--s5); text-align: center; }
.pay-slate .pay-k { font-size: .8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #B9C6E0; }
.pay-slate .pay-v { font-family: var(--f-display); font-size: clamp(2.75rem, 9vw, 4.5rem);
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums; margin-block: var(--s2); }
.pay-slate .pay-unit { font-family: var(--f-ui); font-size: 1.125rem; font-weight: 400; color: #B9C6E0; }
.pay-slate .pay-break { font-size: .875rem; color: #B9C6E0; }
.pay-slate .cf-btn {
  margin-top: var(--s4); font: inherit; font-size: .9375rem; font-weight: 600;
  min-height: 44px; padding-inline: var(--s5); cursor: pointer;
  background: #fff; color: var(--navy-800); border: 0; border-radius: var(--r-md);
}
.pay-slate .cf-btn:hover { background: var(--navy-100); }
.pay-slate .cf-btn[data-state="copied"] { background: var(--verified-bg); color: var(--verified-fg); }
.pay-slate .cf-btn[data-state="failed"] { background: var(--reject-bg); color: var(--reject-fg); }

/* --- Live order summary ----------------------------------------------------- */
.sum-list { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4);
  font-size: .9375rem; }
.sum-list dt { color: var(--ink-muted); }
.sum-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sum-total { border-top: 1px solid var(--line); margin-top: var(--s3); padding-top: var(--s3);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.sum-total b { font-size: 1.5rem; font-weight: 600; color: var(--print-blue);
  font-variant-numeric: tabular-nums; }

/* --- Wizard --------------------------------------------------------------- */
/* ปุ่มเดินหน้า/ถอยหลังท้ายแต่ละขั้น — จอแคบเรียงตั้งและเอาปุ่มหลักไว้บน
   เหมือนกลุ่มปุ่มท้าย modal (.dlg-actions) จะได้ไม่ต้องเรียนรู้สองแบบ */
.wizard-nav { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  margin-top: var(--s6); }
.wizard-nav .grow { flex: 1 1 auto; }
@media (max-width: 560px) {
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard-nav .btn { width: 100%; }
  .wizard-nav .grow { display: none; }
}

/* ช่องยอดบริจาค — ตัวเลขต้องใหญ่พอที่จะเห็นว่าพิมพ์ 5000 ไม่ใช่ 500 */
.input-money { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; }

/* แถบล่างจอมือถือที่ต้องโชว์ยอดรวมด้วย ไม่ใช่ปุ่มอย่างเดียว */
.bar-total { display: grid; line-height: 1.25; margin-right: auto; }
.bar-total .bar-k { font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); }
.bar-total .bar-v { font-size: 1.125rem; font-weight: 600; color: var(--print-blue);
  font-variant-numeric: tabular-nums; }
.action-bar .bar-total + .btn { flex: 0 1 auto; min-width: 46%; }

/* --- Empty / loading / error states --------------------------------------- */
.state { padding: var(--s7) var(--s5); text-align: center; color: var(--ink-muted); }
.state h3 { color: var(--ink); margin-bottom: 4px; }
.skeleton { background: linear-gradient(90deg, #EDF0F5 25%, #F6F7FA 37%, #EDF0F5 63%);
  background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); height: 14px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.callout {
  display: flex; gap: var(--s3); padding: var(--s4);
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-md);
  background: var(--surface); font-size: .9375rem;
}
.callout svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.callout-info    { border-left-color: var(--navy-700); background: var(--navy-050); }
.callout-warn    { border-left-color: var(--pending-line); background: var(--pending-bg); color: var(--pending-fg); }
.callout-success { border-left-color: var(--verified-fg); background: var(--verified-bg); color: var(--verified-fg); }
.callout-danger  { border-left-color: var(--reject-fg); background: var(--reject-bg); color: var(--reject-fg); }

/* --- Toast ---------------------------------------------------------------- */
#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 12px);
  background: var(--navy-900); color: #fff; padding: var(--s3) var(--s5); border-radius: 999px;
  font-size: .875rem; opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
#toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
/* toast ห้ามไปนอนใต้แถบปุ่มที่ปักหมุดล่างจอ */
@media (max-width: 1000px) {
  #toast { bottom: 82px; max-width: calc(100vw - 32px); text-align: center; }
}

/* --- Modal / drawer ------------------------------------------------------- */
dialog { border: 0; padding: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-float);
  max-width: min(640px, calc(100vw - 32px)); width: 100%; background: var(--surface); color: var(--ink);
  max-height: min(88dvh, calc(100dvh - 32px)); overflow: auto; }
dialog::backdrop { background: rgba(14,24,48,.5); }
/* กลุ่มปุ่มท้าย modal — บนจอแคบเรียงตั้ง ปุ่มหลักอยู่บนสุด */
@media (max-width: 480px) {
  .dlg-actions { flex-direction: column-reverse; align-items: stretch; }
  .dlg-actions .btn { width: 100%; }
}

/* --- Footer --------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: var(--s8); }
.site-foot .wrap { padding-block: var(--s6); display: grid; gap: var(--s5);
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: start; }
.site-foot img { height: 34px; width: auto; margin-bottom: var(--s3); }
@media (max-width: 700px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* --- Mobile sticky action bar --------------------------------------------- */
.action-bar {
  position: sticky; bottom: 0; z-index: 30; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom, 0px)); /* กันแถบ home ของ iPhone ทับ */
  display: none;
}
.action-bar .wrap { display: flex; gap: var(--s3); }
.action-bar .btn { flex: 1; }
@media (max-width: 1000px) { .action-bar { display: block; } }

/* --- Reduced motion — ตัด animation แต่ state ยังเปลี่ยนให้เห็น ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .meter > i { transition: none; }
}

/* --- Forced colors -------------------------------------------------------- */
@media (forced-colors: active) {
  .badge, .chip, .panel, .copyfield .cf-row, .drop { border: 1px solid CanvasText; }
  .chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* --- Print — สำหรับแอดมินพิมพ์รายการส่งเสื้อ ------------------------------ */
@media print {
  .site-head, .site-foot, .action-bar, .proto-bar, .no-print { display: none !important; }
  body { background: #fff; }
  .panel { border-color: #999; }
}