/* Active exam surfaces only; shared tokens and Red Spine stay authoritative. */
body[data-exam] #app { padding-bottom: var(--space-8); }
body[data-exam] #app > .qnav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); }
body[data-exam] #app > .qnav .btn { flex:0 1 auto; width:auto; min-height:44px; }
body[data-exam] #app > .qnav .savehint { width:100%; margin:0 0 var(--space-2); }
body[data-exam] #app > .qnav #next { margin-left:auto; }
body[data-exam] #app[data-format="mcq"] > *,
body[data-exam] #app[data-format="chat_choice"] > *,
body[data-exam] #app[data-format="allocation"] > * { max-width:48rem; margin-left:auto; margin-right:auto; }
body[data-exam] #app .progress__label { white-space:normal; text-align:right; }
body[data-exam] #app > .capture-notice { margin-top:var(--space-2); margin-bottom:0; }
body[data-exam] .qnum { margin:0; font-size:inherit; }
body[data-exam] .qcard__stem { font-weight:inherit; }
body[data-exam] #app > .pagehead #back-list {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  height:auto;
  max-width:100%;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-rule);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-sm);
  line-height:1.35;
  text-align:start;
  white-space:normal;
}
body[data-exam] #app > .pagehead #back-list:hover { background:var(--color-surface-sunken); }
body[data-exam] .reviewcell { display:inline-flex; justify-content:center; align-items:center; gap:.25rem; }
body[data-exam] .legend i { display:inline-flex; align-items:center; justify-content:center; font-style:normal; border-radius:var(--radius-sm); width:20px; height:20px; flex:none; }
body[data-exam] :focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
body[data-exam] #exam-heading:focus { outline:2px solid var(--color-focus); outline-offset:4px; }
.exam-dialog { border:0; padding:0; background:transparent; width:min(100% - 2rem, 30rem); max-height:calc(100dvh - 2rem); overflow:auto; }
.exam-dialog::backdrop { background:rgb(0 0 0 / .45); }
.exam-dialog .modal { width:100%; max-height:none; margin:0; }
@media (max-width:639px) {
  body[data-exam] #learner-tabbar { display:none !important; }
  body[data-exam] #learner-nav .learnernav__name,
  body[data-exam] #learner-nav .learnernav__links { display:none; }
  /* NIGHT-7 #1: --qnav-h (เซ็ตจาก quiz.js ด้วยความสูงจริงของแถบผ่าน ResizeObserver)
     คือความสูงที่วัดจริง ไม่ใช่ตัวเลขเดา — ค่า max(11rem, 40dvh)+safe-area เดิม
     เหลือไว้เป็น fallback ก่อน JS รันเท่านั้น เผื่อ margin กันพิกเซลปัดเศษ 8px */
  body[data-exam] #app { padding-bottom:calc(var(--qnav-h, calc(max(11rem, 40dvh) + env(safe-area-inset-bottom))) + 8px); }
  body[data-exam] #app > .pagehead { flex-wrap:wrap; gap:var(--space-2); }
  body[data-exam] #app > .pagehead #back-list { font-size:var(--text-sm); }
  body[data-exam] #app > .qnav,
  body[data-exam="review"] #app > .stack { position:fixed; bottom:0; left:0; right:0; z-index:30; max-height:40dvh; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:var(--space-3); max-width:none; margin:0; padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background:var(--color-surface); border-top:1px solid var(--color-rule); }
  body[data-exam] #app > .qnav .btn { max-width:65%; min-width:0; height:auto; min-height:44px; padding-block:var(--space-3); line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
  body[data-exam] #app > .qnav .btn span,
  body[data-exam="review"] #app > .stack .btn span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
  body[data-exam] #app > .qnav .savehint { text-align:left; font-size:var(--text-sm); }
  body[data-exam="review"] #app > .stack { display:flex; flex-wrap:wrap; gap:var(--space-2); }
  body[data-exam="review"] #app > .stack .btn { flex:1 1 9rem; width:auto; min-height:44px; min-width:0; height:auto; padding-block:var(--space-3); line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
  body[data-exam] .progress { flex-wrap:wrap; }
  body[data-exam] .progress__track { width:100%; }
  body[data-exam] .progress__label { text-align:left; }
  body[data-exam][data-exam-editing="true"] #app > .qnav { position:static; margin-top:var(--space-4); }
  body[data-exam] #mtl-mount input { scroll-margin-block:5rem; }
}

body[data-exam] .exam-toolbar > .progress__label { flex:1 0 100%; text-align:left; }
@media (min-width:640px) { body[data-exam] .exam-toolbar > .progress__label { order:-1; } }

body[data-exam] .legend i.is-done { background:color-mix(in srgb, var(--color-ok) 8%, white); color:var(--color-ok); border:1px solid var(--color-rule); }
body[data-exam] .legend i.is-blank { background:var(--color-surface); color:var(--color-primary-active); border:2px solid var(--color-signature); }

/* Enlarged text uses page flow so every status/action remains keyboard reachable. */
@media (max-width:639px) {
  body[data-exam][data-exam-large-text="true"] #app { padding-bottom:var(--space-8); }
  body[data-exam][data-exam-large-text="true"] #app > .qnav .btn,
  body[data-exam="review"][data-exam-large-text="true"] #app > .stack .btn { width:100%; max-width:none; flex:1 0 100%; }
  body[data-exam][data-exam-large-text="true"] #app > .qnav #next { margin-left:0; }
  body[data-exam][data-exam-large-text="true"] #app > .qnav,
  body[data-exam="review"][data-exam-large-text="true"] #app > .stack { position:static; max-height:none; overflow:visible; margin-top:var(--space-4); }
}

body[data-exam] #exam-heading, body[data-exam] .page-title { scroll-margin-top:5rem; }