/* ===== หน้า 8 ทำข้อสอบ · ใช้ var() จาก css/tokens.css เท่านั้น =====
   ธีม: data-theme = light | dark บน .ex  (สว่าง = palette 23 · มืด = palette 6)
   แบบ: data-layout = 1 กระดาษเลื่อนยาว · 2 ปัดซ้ายขวาทีละข้อ · 3 เต็มจอปัดขึ้น
   กระดาษคำตอบ: data-sheet = on | off ใช้คู่กับแบบไหนก็ได้
   โหมด: data-mode = diagnostic (ไม่บอกถูกผิด) | practice (เฉลยทันที) */

html,body{height:100%}
body{margin:0}
.ex,.ex *{box-sizing:border-box}
.ex h1,.ex h2,.ex p{margin:0}

.ex{
  --ex-bg:var(--c-white); --ex-card:var(--c-white); --ex-line:var(--c-line); --ex-fg:var(--c-ink);
  --ex-mut:var(--c-muted); --ex-acc:var(--c-p23-pink); --ex-acc-t:var(--c-p23-text); --ex-on-acc:var(--c-ink);
  --ex-tint:var(--c-p23-tint); --ex-soft:var(--c-card); --ex-bar:var(--c-white); --ex-sel:var(--c-ink);
  --ex-q:18px;
  height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative;overflow:hidden;
  background:var(--ex-bg);color:var(--ex-fg);font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;color-scheme:light}
.ex[data-theme="dark"]{
  --ex-bg:var(--c-ink); --ex-card:var(--c-ink-raised); --ex-line:var(--c-line-dark); --ex-fg:var(--c-white);
  --ex-mut:var(--c-muted-dark); --ex-acc:var(--c-p6-pink); --ex-acc-t:var(--c-p6-pink); --ex-on-acc:var(--c-ink);
  --ex-tint:var(--c-ink-raised); --ex-soft:var(--c-line-dark); --ex-bar:var(--c-ink); --ex-sel:var(--c-white);
  color-scheme:dark}
.ex[data-size="l"]{--ex-q:21px}

/* ---------- แถบบน ---------- */
.ex-top{flex-shrink:0;background:var(--ex-bar);border-bottom:1px solid var(--ex-line);padding:env(safe-area-inset-top,0px) 12px 0;z-index:5}
.ex-top .row{height:56px;display:flex;align-items:center;gap:8px}
.ex-icon{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ex-fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
@media (hover:hover){.ex-icon:hover{background:var(--ex-soft)}}
.ex-icon:focus-visible,.ex button:focus-visible{outline:2px solid var(--ex-acc);outline-offset:2px}
.ex-title{flex:1;text-align:center;line-height:1.3}
.ex-title b{display:block;font-family:var(--font-head);font-weight:600;font-size:15px}
.ex-title span{font-size:13px;color:var(--ex-mut)}
.ex-size{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:-.02em}
.ex-size small{font-size:11px}
.ex-ticks{display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));gap:4px;padding:0 4px 10px}
.ex-tick{height:22px;border:0;border-radius:6px;background:var(--ex-soft);cursor:pointer;position:relative;padding:0;
  font-family:var(--font-head);font-weight:600;font-size:11px;color:var(--ex-mut)}
.ex-tick.done{background:var(--ex-fg);color:var(--ex-bg)}
.ex-tick.now::after{content:"";position:absolute;left:3px;right:3px;bottom:-6px;height:3px;border-radius:2px;background:var(--ex-fg)}
.ex[data-mode="practice"] .ex-tick.right{background:var(--ex-card);box-shadow:0 0 0 2px var(--state-ok) inset;color:var(--ex-fg)}
.ex[data-mode="practice"] .ex-tick.wrong{background:var(--state-bad);color:var(--c-white)}
.ex-saved{position:absolute;right:16px;top:calc(env(safe-area-inset-top,0px) + 62px);font-size:12px;color:var(--ex-mut);opacity:0;transition:opacity .2s}
.ex-saved.show{opacity:1}

.ex-off{flex-shrink:0;display:flex;gap:8px;align-items:center;justify-content:center;padding:6px 12px;background:var(--c-lime);color:var(--c-ink);
  font-family:var(--font-head);font-weight:600;font-size:13px}

/* ---------- พื้นที่โจทย์ ---------- */
.ex-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:14px 12px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.q{background:var(--ex-card);border:1.5px solid var(--ex-line);border-radius:var(--r);padding:16px 14px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:12px}
.q-head{display:flex;align-items:center;gap:10px}
.q-no{font-family:var(--font-head);font-weight:700;font-size:16px;flex-shrink:0;color:var(--ex-fg)}
.q-meta{flex:1;font-size:13px;color:var(--ex-mut);line-height:1.35}
.q-meta b{font-family:var(--font-head);font-weight:600;color:var(--ex-acc-t)}
.q-type{display:none}
.ex[data-mode="practice"] .q-type{display:inline}
.q-text{font-size:var(--ex-q);line-height:1.6}
.q-seq{font-family:var(--font-head);font-weight:700;font-size:calc(var(--ex-q) + 10px);letter-spacing:.04em;text-align:center;
  padding:10px 0;background:var(--ex-tint);border-radius:var(--r-sm)}
.q-passage{background:var(--ex-tint);border-radius:var(--r-sm);padding:12px 14px;font-size:calc(var(--ex-q) - 2px);line-height:1.7;position:relative}
.q-passage.clip{max-height:9.5em;overflow:hidden}
.q-passage.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(transparent,var(--ex-tint));border-radius:0 0 var(--r-sm) var(--r-sm)}
.q-more{align-self:flex-start;border:0;background:none;color:var(--ex-acc-t);font-family:var(--font-head);font-weight:600;font-size:14px;cursor:pointer;min-height:36px;padding:0}

.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:14px;cursor:pointer;text-align:left;
  background:var(--ex-card);border:1.5px solid var(--ex-line);color:var(--ex-fg);font-family:var(--font-body);font-size:calc(var(--ex-q) - 1px);line-height:1.45;position:relative;
  transition:border-color .15s,background .15s}
.opt .k{position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ex-mut);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:600;font-size:14px;flex-shrink:0;color:var(--ex-mut)}
.opt .k svg{position:absolute;left:-9px;top:-9px;width:48px;height:48px;overflow:visible;opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity .18s,transform .22s}
.opt .k path{stroke:var(--ex-acc)}
.opt .t{flex:1}
.opt[aria-pressed="true"]{border:2px solid var(--ex-sel);background:var(--ex-tint)}
.opt[aria-pressed="true"] .k{border-color:transparent;color:var(--ex-fg);font-weight:700}
.opt[aria-pressed="true"] .k svg{opacity:1;transform:none}
.opt .st{margin-left:auto;font-family:var(--font-head);font-weight:600;font-size:13px;white-space:nowrap;padding:3px 9px;border-radius:var(--r-pill)}
.opt.is-correct{border:2px solid var(--state-ok);background:var(--ex-card)}
.opt.is-correct .st{border:1.5px solid var(--state-ok);color:var(--ex-fg)}
.opt.is-correct .st i{font-style:normal;color:var(--state-ok)}
.opt.is-wrong{border:2px solid var(--state-bad)}
.opt.is-wrong .st{background:var(--state-bad);color:var(--c-white)}
.opt.is-dim{opacity:.55}
.ex[data-theme="light"] .opt.is-wrong{background:var(--state-bad-bg)}
@media (prefers-reduced-motion:reduce){.opt .k svg,.opt,.ex-saved{transition:none}.ex-list{scroll-behavior:auto}}

.fb{border-radius:var(--r-sm);padding:12px 14px;background:var(--ex-tint);display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.55}
.fb .v{font-family:var(--font-head);font-weight:600;font-size:16px}
.fb .v.ok i{font-style:normal;color:var(--state-ok)}
.fb .v.bad{color:var(--state-bad)}
.ex[data-theme="dark"] .fb .v.bad{color:var(--c-white)}
.ex[data-theme="dark"] .fb .v.bad i{font-style:normal;background:var(--state-bad);border-radius:var(--r-pill);padding:0 8px}
.fb .trap{color:var(--ex-mut);font-size:14px}
.fb .next{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ex-acc-t)}

/* ท้ายช่วง */
.q-end{background:transparent;border:2px dashed var(--ex-line);align-items:stretch;text-align:center}
.q-end h2{font-family:var(--font-head);font-weight:700;font-size:20px}
.q-end p{color:var(--ex-mut);font-size:14px}
.btn-x{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);border-radius:var(--r-btn);border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:17px;padding:0 18px;background:var(--ex-acc);color:var(--ex-on-acc);text-decoration:none}
.btn-x.ghost{background:transparent;color:var(--ex-fg);border:1.5px solid var(--ex-line)}
.btn-x:disabled{background:var(--ex-soft);color:var(--ex-mut);cursor:default}
.ex-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ex-grid button{min-height:44px;border-radius:10px;border:1.5px solid var(--ex-line);background:var(--ex-card);color:var(--ex-fg);font-family:var(--font-head);font-weight:600;cursor:pointer}
.ex-grid button.done{background:var(--ex-fg);border-color:var(--ex-fg);color:var(--ex-bg)}
.ex-legal{font-size:12px;color:var(--ex-mut);text-align:center;line-height:1.5}

/* ---------- แบบ 2: ปัดซ้าย-ขวาทีละข้อ ---------- */
.ex[data-layout="2"] .ex-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:0;padding:0}
.ex[data-layout="2"] .q{flex:0 0 100%;scroll-snap-align:start;border:0;border-radius:0;overflow-y:auto;padding:18px 16px calc(92px + env(safe-area-inset-bottom,0px));background:var(--ex-bg)}
.ex[data-layout="2"] .q-end{border:0}
.ex-nav{display:none}
.ex[data-layout="2"] .ex-nav{display:flex;position:absolute;left:0;right:0;bottom:0;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--ex-bar);border-top:1px solid var(--ex-line);z-index:4}
.ex-nav .btn-x{flex:1;font-size:16px}
.ex-nav .btn-x.ghost{flex:0 0 auto}

/* ---------- แบบ 3: เต็มจอ ปัดขึ้น ---------- */
.ex[data-layout="3"] .ex-list{scroll-snap-type:y mandatory;padding:0;gap:0}
.ex[data-layout="3"] .q{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;border:0;border-radius:0;justify-content:center;padding:18px 16px 64px;background:var(--ex-bg);
  border-bottom:1px solid var(--ex-line);position:relative}
.ex[data-layout="3"] .q-seq{font-size:calc(var(--ex-q) + 16px)}
.ex[data-layout="3"] .q-hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ex-mut)}
.q-hint{display:none}
.ex[data-layout="3"] .q-hint{display:block}
.ex[data-layout="3"] .q-hint b{display:inline-block;animation:kp-nudge 1.6s ease-in-out infinite}
@keyframes kp-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.ex[data-layout="3"] .q-hint b{animation:none}}
.ex[data-layout="3"] .ex-ticks{display:none}
.ex-rail{display:none}
.ex[data-layout="3"] .ex-rail{display:flex;flex-direction:column;gap:5px;position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:4}
.ex-rail i{width:6px;height:18px;border-radius:3px;background:var(--ex-soft)}
.ex-rail i.done{background:var(--ex-fg)}
.ex-rail i.now{outline:2px solid var(--ex-sel);outline-offset:1px}

/* ---------- กระดาษคำตอบ (data-sheet="on") ใช้ได้กับทุกแบบ ---------- */
.ex-sheet{display:none}
.ex[data-sheet="on"] .ex-sheet{display:block;position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--ex-bar);border-top:1.5px solid var(--ex-fg);
  border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(20,20,20,.12);padding:0 12px calc(4px + env(safe-area-inset-bottom,0px))}
.ex[data-sheet="on"][data-layout="1"] .ex-list{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* แบบ 2: กระดาษคำตอบวางเหนือแถบปุ่ม */
.ex[data-sheet="on"][data-layout="2"] .ex-sheet{bottom:calc(65px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;box-shadow:none;padding-bottom:0}
.ex[data-sheet="on"][data-layout="2"] .q{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
/* แบบ 3: เว้นที่ด้านล่างให้กระดาษคำตอบ */
.ex[data-sheet="on"][data-layout="3"] .q{padding-bottom:124px}
.ex[data-sheet="on"][data-layout="3"] .q-hint{bottom:70px}
.ex[data-sheet="on"][data-layout="3"] .ex-rail{top:calc(50% - 28px)}
.ex-sheet summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;cursor:pointer;font-family:var(--font-head);font-weight:600}
.ex-sheet summary::-webkit-details-marker{display:none}
.ex-sheet summary .grow{flex:1}
.ex-sheet summary .chev{transition:transform .2s}
.ex-sheet[open] summary .chev{transform:rotate(180deg)}
.ex-bub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;padding:4px 2px 10px;max-height:46vh;overflow-y:auto}
.ex-bub .r{display:flex;align-items:center;gap:6px;min-height:40px}
.ex-bub .r > button:first-child{width:28px;border:0;background:none;color:var(--ex-fg);font-family:var(--font-head);font-weight:700;font-size:14px;text-align:right;cursor:pointer;padding:0}
.ex-bub .b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ex-mut);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--font-head);color:var(--ex-mut);background:none;cursor:pointer;padding:0}
.ex-bub .b.on{background:var(--ex-fg);border-color:var(--ex-fg);color:var(--ex-bg)}

/* ---------- แผ่นล่าง (ยืนยันออก / ส่งช่วง) ---------- */
.ex-scrim{position:absolute;inset:0;background:rgba(20,20,20,.45);z-index:20;display:flex;align-items:flex-end}
.ex-dlg{width:100%;background:var(--ex-card);color:var(--ex-fg);border-radius:22px 22px 0 0;padding:22px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.ex-dlg h2{font-family:var(--font-head);font-weight:700;font-size:21px}
.ex-dlg p{color:var(--ex-mut);font-size:15px}
.ex-dlg img{width:56px;height:56px}

/* ---------- กำลังโหลด ---------- */
.sk{background:var(--ex-soft);border-radius:10px;animation:kp-pulse 1.2s ease-in-out infinite}
@keyframes kp-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}