/* หน้าสอบ — ออกแบบให้ใช้บนมือถือเป็นหลัก เพราะเด็กทำบนมือถือ */

/* `hidden` แพ้ `display:flex` ของคลาส เพราะ specificity สูงกว่ากฎของเบราว์เซอร์ —
   แถบปุ่มล่างจึงโผล่ทับหน้าเลือกโหมดทั้งที่สั่งซ่อนไว้ · ต้องประกาศทับให้ชนะ */
[hidden] { display: none !important; }

.exam-wrap { max-width: 760px; margin: 0 auto; padding: 0 18px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---- แถบบน: นาฬิกาและความคืบหน้า ---- */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  gap: 14px; padding: 12px 0; background: rgba(var(--bg-rgb),0.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--ink-rgb),0.08); }
.clock { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500;
  color: var(--fg); font-variant-numeric: tabular-nums; }
.clock.low { color: var(--gold); }
.clock.out { color: var(--red); }
.bar .count { margin-left: auto; font-size: 13.5px; color: var(--fg-mute); }

/* ---- คำชี้แจงกลาง ----
   ข้อตกลงที่โจทย์หลายข้ออาศัยอยู่ (ลูกเต๋าเที่ยงตรง อัตราคงที่ ความแปรปรวนหาร n)
   เขียนไว้ที่เดียว ดีกว่าไปต่อท้ายโจทย์ยี่สิบกว่าข้อ — โจทย์คือสิ่งที่คนอ่านตอนจับเวลา
   พับไว้เป็นค่าเริ่มต้น เปิดดูได้ทุกเมื่อ ไม่แย่งที่กับตัวข้อสอบ */
.rubric { margin: 12px 0 4px; font-size: 13.5px; color: var(--fg-mute); }
.rubric > summary { cursor: pointer; color: var(--fg-mute); user-select: none; }
.rubric > summary:hover { color: var(--fg); }
.rubric ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.75; }
.rubric li { margin: 4px 0; }

/* ---- ตารางข้อ: หัวใจของการข้ามแล้วย้อนกลับ ----
   ต้องเห็นทั้งฉบับในตาเดียว ไม่งั้นคนตัดสินใจไม่ได้ว่าจะทิ้งข้อไหน */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 7px; margin: 16px 0 22px; }
.grid button { min-height: 42px; border-radius: 10px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; color: var(--fg-mute);
  background: rgba(var(--ink-rgb),0.04); border: 1px solid rgba(var(--ink-rgb),0.09);
  transition: transform .12s, border-color .2s, background .2s; }
.grid button:hover { transform: translateY(-2px); }
.grid button.done { background: rgba(var(--indigo-rgb),0.16); border-color: rgba(var(--indigo-rgb),0.45);
  color: var(--indigo-soft); }
.grid button.here { outline: 2px solid var(--indigo); outline-offset: 1px; color: var(--fg-strong); }
.grid button.right { background: rgba(var(--green-rgb),0.15); border-color: rgba(var(--green-rgb),0.4); color: var(--green); }
.grid button.wrong { background: rgba(var(--red-rgb),0.14); border-color: rgba(var(--red-rgb),0.4); color: var(--red); }

/* ---- โจทย์ ---- */
.q-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--fg-mute); margin-bottom: 12px; }
.q-level { padding: 3px 9px; border-radius: 999px; font-weight: 600;
  background: rgba(var(--indigo-rgb),0.14); color: var(--indigo-soft); }
.q-stem { font-size: 18px; line-height: 1.7; color: var(--fg); margin: 0 0 20px; }

.choices { display: grid; gap: 10px; }
/* 44px ขั้นต่ำ — ต่ำกว่านี้กดพลาดบนมือถือ ซึ่งบนข้อสอบจับเวลาคือเสียคะแนนจริง */
.choice { display: flex; align-items: center; gap: 13px; min-height: 52px;
  padding: 13px 16px; border-radius: 13px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--fg-3);
  background: rgba(var(--ink-rgb),0.035); border: 1px solid rgba(var(--ink-rgb),0.09);
  transition: border-color .2s, background .2s; }
.choice:hover { border-color: rgba(var(--indigo-rgb),0.4); }
.choice .mark { flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  font-weight: 600; background: rgba(var(--ink-rgb),0.07); color: var(--fg-mute); }
.choice.picked { background: rgba(var(--indigo-rgb),0.14); border-color: rgba(var(--indigo-rgb),0.55); color: var(--fg-strong); }
.choice.picked .mark { background: var(--indigo-solid); color: var(--on-solid); }
.choice.is-right { background: rgba(var(--green-rgb),0.13); border-color: rgba(var(--green-rgb),0.45); }
.choice.is-right .mark { background: var(--green-solid); color: var(--on-solid); }
.choice.is-wrong { background: rgba(var(--red-rgb),0.12); border-color: rgba(var(--red-rgb),0.45); }
.choice.is-wrong .mark { background: var(--red-solid); color: var(--on-solid); }

/* ---- แถบล่าง: ปุ่มเดินหน้าถอยหลัง ---- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(var(--bg-rgb),0.94); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(var(--ink-rgb),0.08); }
.nav button { flex: 1; min-height: 48px; border-radius: 12px; font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  background: rgba(var(--ink-rgb),0.05); border: 1px solid rgba(var(--ink-rgb),0.1); color: var(--fg-3); }
.nav button:disabled { opacity: .35; cursor: default; }
.nav .go { background: var(--indigo-solid); border-color: var(--indigo-solid); color: var(--on-solid); flex: 1.4; }

/* ---- รายงาน ---- */
.score { font-size: 46px; font-weight: 700; color: var(--fg-strong); line-height: 1;
  font-variant-numeric: tabular-nums; }
.rep-block { padding: 20px; border-radius: 16px; margin-bottom: 14px;
  background: rgba(var(--ink-rgb),0.035); border: 1px solid rgba(var(--ink-rgb),0.09); }
.rep-block h3 { margin: 0 0 12px; font-size: 16px; color: var(--fg-strong); }
.rep-block.warn { background: rgba(var(--gold-rgb),0.09); border-color: rgba(var(--gold-rgb),0.32); }
.focus-row { padding: 13px 0; border-bottom: 1px solid rgba(var(--ink-rgb),0.07); }
.focus-row:last-child { border-bottom: 0; }
.focus-row .why { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--indigo-soft); }
.dim { color: var(--fg-mute); font-size: 13.5px; }