/* public/check-your-car/style.css — เฉพาะหน้า P4 (เช็ครถของคุณ)
   หน้ายังเป็นโครงเท่านั้น (เนื้อหาอาการรถรอพ่อ — docs/HARD-RULES.md ข้อ 5) รอบนี้แค่แต่งให้เข้าแพตเทิร์นเดียว
   กับหน้าอื่น (header/nav/แถบโทร/footer) ใช้โทเคนจาก /shared/tokens.css ล้วน ไม่มีค่าดิบ */

main.container {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
}
main.container > h1 {
  margin-bottom: var(--sp-5);
}

/* ---------- แท็บ มีอาการผิดปกติ / ยางถึงเวลาเปลี่ยนหรือยัง ---------- */
.tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.tab-btn {
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--on-surface-2);
  font-size: var(--fs-btn);
  font-weight: 600;
  cursor: pointer;
}
.tab-btn:active { background: var(--surface-2); }
.tab-btn[aria-selected="true"] {
  color: var(--on-surface);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.tab-panel {
  display: grid;
  gap: var(--sp-4);
}
.tab-panel__call {
  width: 100%;
}

#อาการอื่น {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* ---------- อาการที่พบบ่อย (symptoms.json — 2 คู่จริงจากพ่อ 2026-07-31) ---------- */
.symptoms-block {
  margin-top: var(--sp-2);
}
.symptoms-block > h3 {
  margin-bottom: var(--sp-3);
}
.symptom-list {
  display: grid;
  gap: var(--sp-3);
}
/* การ์ดเดี่ยว 2 ใบเรียงเต็มความกว้าง — ตั้งใจไม่ทำเป็นกริดหลายคอลัมน์ให้ 2 รายการดูห่างเป็นช่องว่าง
   (docs/HARD-RULES.md ข้อ 5 จำกัดให้มีแค่ 2 คู่ตอนนี้ — เพิ่มคู่ใหม่ได้ทีหลังโดยแก้ symptoms.json อย่างเดียว
   ไม่ต้องแก้ CSS/โครงหน้านี้เลย เพราะ .symptom-list เป็น grid แถวเดียวที่ขยายตามจำนวนรายการอัตโนมัติ) */
.symptom-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.symptom-card > h4 {
  font-size: var(--fs-h3);
  font-weight: 700;
}
.symptom-card__advice {
  margin-top: var(--sp-2);
  color: var(--accent);
  font-weight: 600;
}
.symptom-list__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
}
.symptom-list__hint a {
  color: var(--accent);
}