/* ============================================================================
   SaveCost · ชั้น component — สร้างบน tokens.css เท่านั้น ห้ามมีค่าดิบในไฟล์นี้

   ทุกคลาสขึ้นต้นด้วย sc- เพราะ styles.css กับ me.css เคยชนกัน 9 ชื่อมาแล้ว
   (.track ของ me ไปโดน padding ของ .track ในแอปจนแถบงบสูงเหลือศูนย์)
   ของเดิม 4,834 บรรทัดจับจองชื่อทั่วไปไว้หมดแล้ว เช่น .card .row .field .pill
   การตั้งชื่อใหม่ทับคือการรอให้พังทีหลัง

   ย้ายหน้าจอเดิมมาใช้ทีละหน้าได้ ไม่ต้องรื้อทีเดียว
   ============================================================================ */

/* ---------------------------------------------------------------- โฟกัส ----
   วงโฟกัสเป็นของคนที่ใช้คีย์บอร์ดอย่างเดียว ซึ่งรวมถึงคนที่ใช้เมาส์ไม่ได้
   :focus-visible จึงถูกกว่า :focus เพราะไม่ไปขึ้นตอนคนแตะด้วยนิ้ว */
.sc-btn:focus-visible,
.sc-input:focus-visible,
.sc-row:focus-visible,
.sc-pill:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- ปุ่ม ----
   ค่าทั้งหมดตรงกับที่แอปใช้จริงมาตั้งแต่ต้น ไม่ใช่ค่าที่ตั้งใหม่ · ตัวเลขพวกนี้
   ผ่านการใช้งานหน้าร้านมาแล้ว จึงย้ายนิยามมาไว้ที่เดียว ไม่ใช่เปลี่ยนของที่ใช้ได้อยู่

   คลาสเดิมของแอป (.primary .secondary .ghost .danger) ผูกไว้กับนิยามเดียวกัน
   ตรงนี้เลย แทนที่จะไล่แก้ class ในมาร์กอัป 450 จุดทั้งใน HTML และใน template
   ของ JS อีก 355 จุด ซึ่งเป็นโค้ดที่ร้านใช้จริงทุกวันและผมกดดูเองไม่ได้ทั้งหมด
   ผลที่ได้เหมือนกันคือปุ่มทั้งระบบมีที่นิยามที่เดียว */
.sc-btn, .primary, .secondary, .danger, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
/* ขอบโปร่งกับ line-height เป็นของปุ่มที่เขียนใหม่เท่านั้น · ปุ่มเดิมของแอป
   ไม่เคยมีสองอย่างนี้ ถ้าใส่ให้ด้วยจะเตี้ยลงและกล่องโตขึ้นทั้งแอป
   วัดแล้ว 118 ปุ่มโดนขอบ และ 114 ปุ่ม line-height เปลี่ยน */
/* font: inherit ตัวย่อจะล้าง font-weight กลับเป็นค่าที่สืบทอดมาด้วย
   ซึ่งลบน้ำหนัก 500 ที่ตั้งไว้ข้างบนทิ้ง · ระบุ font-family อย่างเดียวพอ */
.sc-btn { border: 1px solid transparent; font-family: inherit; font-size: var(--t-md);
          line-height: 1.2; text-align: center; }

.sc-btn:active, .primary:active, .secondary:active, .danger:active, .ghost:active {
  transform: scale(.99);
}
.sc-btn[disabled], .sc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.primary:disabled { opacity: .5; cursor: progress; }

.sc-btn--primary, .primary { background: var(--forest); color: #fff; }
.sc-btn--primary:hover, .primary:hover { background: var(--forest-mid); }
/* ปุ่มยืนยันของแอปเต็มความกว้างเสมอ และสูง 46 เพราะเป็นปุ่มที่ถูกกดตอนมือเปียก */
.primary { width: 100%; margin-top: var(--s-4); min-height: 46px; }

/* ปุ่มรองของแอปเป็นเขียวอ่อน ไม่ใช่ขาวมีขอบ · เป็นการตัดสินใจของแอปที่มีมาก่อน
   จึงยึดของแอปเป็นหลัก แล้วให้หน้า landing ที่ต้องการแบบมีขอบใช้ตัวแยก */
.sc-btn--secondary, .secondary { background: var(--forest-soft); color: var(--forest-ink); }
.sc-btn--secondary:hover, .secondary:hover { background: var(--forest); color: #fff; }
/* แบบมีขอบบนพื้นขาว ใช้ที่หน้า landing */
.sc-btn--outline {
  background: var(--surface); border-color: var(--rule); color: var(--ink);
}
.sc-btn--outline:hover { border-color: var(--forest); color: var(--forest-ink); }

.sc-btn--soft { background: var(--forest-soft); color: var(--forest-ink); }
.sc-btn--soft:hover { background: var(--leaf); }

.sc-btn--ghost, .ghost { background: var(--surface-2); color: var(--ink-2); }
.sc-btn--ghost:hover, .ghost:hover { background: var(--rule); color: var(--ink); }

/* การลบของที่ลูกค้าสะสมมานาน กับการบันทึกยอดขาย ไม่ควรหน้าตาเหมือนกัน */
.sc-btn--danger, .danger { background: var(--bad-bg); color: var(--bad); }

.sc-btn--sm { min-height: 36px; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }
.sc-btn--lg { min-height: 52px; padding: var(--s-4) var(--s-8); font-size: var(--t-base); }
.sc-btn--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------- การ์ด ---- */
.sc-card, .card {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
/* การ์ดของแอปเว้นในด้วยคลาสของแต่ละชนิด ส่วนการ์ดที่เขียนใหม่เว้นเองตรงนี้ */
.sc-card { padding: var(--s-5); }
.sc-card--flat { box-shadow: none; }
.sc-card--raised { border-color: transparent; box-shadow: var(--shadow); }
.sc-card--float { border-color: transparent; box-shadow: var(--shadow-float); }
.sc-card--pad-lg { padding: var(--s-8); }

.sc-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.sc-card__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดบรรทัดไม่ได้ถ้าไม่บอก
   flex item ที่ min-width เป็น auto จะไม่ยอมหด แล้วชื่อร้านยาว ๆ จะดันของ
   ข้าง ๆ ตกขอบไปเลย */
.sc-card__title { min-width: 0; }
.sc-card__sub {
  flex: none;
  color: var(--ink-3);
  font-size: var(--t-sm);
}

/* ----------------------------------------------------------------- ป้าย ----
   ป้ายเล็กเหนือหัวข้อ แบบที่หน้า SaaS ใช้บอกว่าหัวข้อนี้อยู่หมวดอะไร */
.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--forest-soft);
  color: var(--forest-ink);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  line-height: 1.6;
  white-space: nowrap;
}
.sc-pill--good { background: var(--good-bg); color: var(--good); }
.sc-pill--bad { background: var(--bad-bg); color: var(--bad); }
.sc-pill--warn { background: var(--warn-bg); color: var(--warn); }
.sc-pill--over { background: var(--over-bg); color: var(--over); }
.sc-pill--quiet { background: var(--surface-2); color: var(--ink-2); }

/* ---------------------------------------------------------------- ฟอร์ม ---- */
.sc-field, .field { display: grid; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.sc-field__label, .field label {
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}
.sc-input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
}
/* 16px ขึ้นไปเท่านั้นที่ Safari บน iOS จะไม่ซูมเข้าตอนแตะช่องกรอก
   ซึ่งการซูมนั้นทำให้เลย์เอาต์เลื่อนทั้งหน้าและกดปุ่มถัดไปพลาด */
.sc-input:focus { border-color: var(--forest); outline: none; }
.sc-input[aria-invalid="true"] { border-color: var(--bad); }
.sc-input::placeholder { color: var(--ink-3); }

.sc-field__hint { color: var(--ink-3); font-size: var(--t-xs); }
.hint { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.7; margin: 16px 0 0; }
.sc-field__error { color: var(--bad); font-size: var(--t-xs); font-weight: var(--w-medium); }

/* ---------------------------------------------------------- แถวในรายการ ---- */
.sc-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sc-row:hover { border-color: var(--forest); }
.sc-row[aria-selected="true"] { border-color: var(--forest); border-width: 2px; }
.sc-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-row__title {
  font-weight: var(--w-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-row__meta { color: var(--ink-3); font-size: var(--t-xs); }
.sc-row__value {
  flex: none;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- ตัวเลขเด่น ---- */
.sc-stat { display: flex; flex-direction: column; gap: var(--s-1); }
.sc-stat__label { color: var(--ink-3); font-size: var(--t-sm); }
.sc-stat__value {
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  /* ตัวเลขเงินต้องกว้างเท่ากันทุกหลัก ไม่งั้นยอดที่อัปเดตทุกวินาทีจะขยับ
     ซ้ายขวาจนอ่านไม่ทัน */
  font-variant-numeric: tabular-nums;
}
.sc-stat__note { color: var(--ink-3); font-size: var(--t-xs); }

/* --------------------------------------------------------------- โครงหน้า ---- */
.sc-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.sc-container--narrow { max-width: var(--container-narrow); }

.sc-section { padding-block: var(--sec-y); }
.sc-section--tint { background: var(--surface-2); }
.sc-section__head {
  max-width: 46ch;
  margin-bottom: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.sc-section__title {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
}
.sc-section__lead {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
}

.sc-grid { display: grid; gap: var(--s-5); }
.sc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .sc-grid--3, .sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sc-grid--2, .sc-grid--3, .sc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.sc-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.sc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* ----------------------------------------------------------------- ข้อความ ---- */
.sc-prose { color: var(--ink-2); font-size: var(--t-base); line-height: var(--lh-loose); }
.sc-prose strong { color: var(--ink); font-weight: var(--w-semi); }
.sc-muted { color: var(--ink-3); }
.sc-nums { font-variant-numeric: tabular-nums; }

/* อ่านได้ด้วยโปรแกรมอ่านหน้าจอ แต่ไม่กินที่บนจอ · ใช้กับป้ายของปุ่มไอคอน */
.sc-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}