/* Learner / admin visibility toolbar + persisted display modes */

/* Root rem scale (Tailwind spacing/type use rem) */
html[data-a11y-font-scale="xs"] {
  font-size: 78%;
}

html[data-a11y-font-scale="sm"] {
  font-size: 88%;
}

html[data-a11y-font-scale="md"] {
  font-size: 100%;
}

html[data-a11y-font-scale="lg"] {
  font-size: 118%;
}

html[data-a11y-font-scale="xl"] {
  font-size: 138%;
}

/* Lesson rich text: extra bump on top of root rem */
html[data-a11y-font-scale="lg"] .course-lesson-prose {
  font-size: 1.06em;
}

html[data-a11y-font-scale="xl"] .course-lesson-prose {
  font-size: 1.14em;
}

.dots-a11y-toolbar {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #d1d5db;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 45;
}

/* Login / Register: แถบปรับตัวอักษร + HC มุมซ้ายบน (ทับพื้นที่รูปปก aside) */
.dots-a11y-toolbar--auth-corner {
  width: max-content;
  max-width: calc(100vw - 0.75rem);
  position: fixed;
  top: max(0.35rem, env(safe-area-inset-top, 0px));
  left: max(0.35rem, env(safe-area-inset-left, 0px));
  right: auto;
  z-index: 60;
  padding: 0.4rem 0.55rem;
  border-bottom: none;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dots-a11y-toolbar--auth-corner .dots-a11y-toolbar-inner {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
  max-width: none;
}

.dots-a11y-toolbar--auth-corner .dots-a11y-font-group {
  flex-shrink: 0;
}

.dots-a11y-toolbar--auth-corner .dots-a11y-hc-btn {
  padding: 0.3rem 0.5rem;
  font-size: 0.8125rem;
  min-width: 0;
  flex: 0 1 auto;
}

.dots-a11y-toolbar--auth-corner .dots-a11y-hc-label {
  flex-wrap: nowrap;
  min-width: 0;
}

.dots-a11y-toolbar--auth-corner .dots-a11y-hc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5rem;
  line-height: 1.25;
}

@media (min-width: 480px) {
  .dots-a11y-toolbar--auth-corner .dots-a11y-hc-name {
    max-width: 13.5rem;
  }
}

html[data-a11y-contrast='high'] .dots-a11y-toolbar--auth-corner {
  border-color: var(--hc-border-strong) !important;
}

.dots-a11y-toolbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
}

.dots-a11y-toolbar .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dots-a11y-font-group {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  overflow: hidden;
}

.dots-a11y-segment {
  margin: 0;
  border: none;
  border-right: 1px solid #d1d5db;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.25;
  padding: 0.4rem 0.45rem;
  cursor: pointer;
  min-width: 2rem;
}

@media (min-width: 480px) {
  .dots-a11y-segment {
    font-size: 0.875rem;
    padding: 0.4rem 0.55rem;
    min-width: 2.25rem;
  }
}

.dots-a11y-segment-last {
  border-right: none;
}

.dots-a11y-segment:hover {
  background: #f8fafc;
}

.dots-a11y-segment:disabled,
.dots-a11y-segment[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.dots-a11y-segment:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
  z-index: 1;
}

.dots-a11y-segment-active {
  background: #e0f2fe;
  font-weight: 600;
}

.dots-a11y-hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.dots-a11y-hc-btn:hover {
  background: #f8fafc;
}

.dots-a11y-hc-btn:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.dots-a11y-hc-btn[aria-pressed='true'] {
  border-color: #e6cf00;
  background: #fffef0;
}

.dots-a11y-hc-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.dots-a11y-hc-name {
  white-space: nowrap;
}

.dots-a11y-hc-status {
  display: inline-block;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #4b5563;
  flex-shrink: 0;
}

.dots-a11y-hc-btn[aria-pressed='true'] .dots-a11y-hc-status {
  background: #fff9c4;
  border-color: #ffec00;
  color: #5c4a00;
}

.dots-a11y-hc-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-sizing: border-box;
  background: linear-gradient(90deg, #ffffff 50%, #000000 50%);
  flex-shrink: 0;
}

/* ปุ่ม ? ดูแนะนำอีกครั้ง */
.dots-a11y-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.dots-a11y-help-btn:hover {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #7dd3fc;
}

.dots-a11y-help-btn:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.dots-a11y-toolbar--auth-corner .dots-a11y-help-btn {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

.dots-a11y-live {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Quiz choices (used in quiz-take.js) */
.quiz-choice:hover {
  background: #f8fafc;
}

.quiz-choice:focus-within {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Selected choice (works for label > input + span) */
.quiz-choice input:checked + span {
  font-weight: 600;
}

/*
 * High contrast: โทนหลัก ดำ–เหลือง–ขาว (พื้นดำ / การ์ดเทาเข้ม / ข้อความขาว / เมนูและหัวข้อหลักเหลือง)
 */
html[data-a11y-contrast="high"] {
  --hc-bg: #000000;
  --hc-fg: #ffffff;
  --hc-card: #141414;
  --hc-border: #2a2a2a;
  --hc-border-strong: #404040;
  --hc-hover: #262626;
  --hc-muted: #d4d4d4;
  --hc-link: #fff94d;
  --hc-accent: #ffec00;
  --hc-accent-dark: #e6cf00;
  --hc-selected-bg: #422006;
  --hc-selected-border: #ffec00;
  --hc-selected-fg: #fffee5;
  --hc-sunk: #0a0a0a;
}

html[data-a11y-contrast="high"] body {
  background-color: var(--hc-bg) !important;
  color: var(--hc-fg) !important;
}

/* Quiz choice hover in high contrast */
html[data-a11y-contrast="high"] .quiz-choice:hover {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .quiz-choice input:checked + span {
  color: var(--hc-selected-fg) !important;
}

html[data-a11y-contrast="high"] .quiz-choice:has(input:checked) {
  background-color: var(--hc-selected-bg) !important;
  border-color: var(--hc-selected-border) !important;
  color: var(--hc-selected-fg) !important;
}

html[data-a11y-contrast="high"] .quiz-review-choice-selected {
  background-color: var(--hc-selected-bg) !important;
  border-color: var(--hc-selected-border) !important;
  color: var(--hc-selected-fg) !important;
}

html[data-a11y-contrast="high"] .quiz-review-choice-selected * {
  color: inherit !important;
}

/* ทับ main [class*="text-slate-"] / text-sky ที่ชนะ inherit — ข้อความบนพื้น sky-50 เดิมจึงไม่กลืน */
html[data-a11y-contrast="high"] .quiz-review-choice-selected [class*="text-slate-"],
html[data-a11y-contrast="high"] .quiz-review-choice-selected [class*="text-sky-"],
html[data-a11y-contrast="high"] .quiz-review-choice-selected [class*="text-emerald-"] {
  color: var(--hc-selected-fg) !important;
}

/* หลังส่งแบบทดสอบ: การ์ดรีวิว + ปุ่มกลับ (กัน bg-slate-50/80, bg-sky-50 ไม่เข้า HC) */
html[data-a11y-contrast="high"] #take-result {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-result .text-slate-800 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-result-quiz-detail .text-slate-600 {
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] #take-result-quiz-detail h3 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #take-result-review [class*="bg-slate-50"] {
  background-color: var(--hc-sunk) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-result-review h3 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #take-result-review h3 [class*="text-sky-"] {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] #take-result-review .prose,
html[data-a11y-contrast="high"] #take-result-review .prose * {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-result-review .prose a {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] #take-result-review .border-slate-200,
html[data-a11y-contrast="high"] #take-result-review [class*="border-slate-100"] {
  border-color: var(--hc-border-strong) !important;
}

/* แถวตัวเลือกที่ไม่ใช่ข้อที่เลือก (ยังเป็น sky-50 จากธีม) — ไม่ทับ .quiz-review-choice-selected */
html[data-a11y-contrast="high"] #take-result-review .bg-sky-50:not(.quiz-review-choice-selected) {
  background-color: var(--hc-sunk) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] #take-result-review .quiz-review-choice-selected {
  background-color: var(--hc-selected-bg) !important;
  border-color: var(--hc-selected-border) !important;
  color: var(--hc-selected-fg) !important;
}

html[data-a11y-contrast="high"] #take-result-review .border-sky-400 {
  border-color: var(--hc-accent) !important;
}

/* Quiz review: correct answers (green states) in high contrast */
html[data-a11y-contrast="high"] #take-result-review .bg-emerald-50,
html[data-a11y-contrast="high"] #take-result-review .bg-emerald-100 {
  background-color: #052e16 !important;
  border-color: #34d399 !important;
  color: #ecfdf5 !important;
}

html[data-a11y-contrast="high"] #take-result-review .bg-emerald-50 *,
html[data-a11y-contrast="high"] #take-result-review .bg-emerald-100 * {
  color: inherit !important;
}

html[data-a11y-contrast="high"] #take-result-review .bg-emerald-50 .text-emerald-600,
html[data-a11y-contrast="high"] #take-result-review .bg-emerald-100 .text-emerald-600 {
  color: #6ee7b7 !important;
}

html[data-a11y-contrast="high"] #take-result-review .border-emerald-500,
html[data-a11y-contrast="high"] #take-result-review .border-emerald-600 {
  border-color: #34d399 !important;
}

/* Quiz review: คำตอบของผู้เรียนที่ผิด (MCQ / ถูก-ผิด) — กัน bg-slate-200 + ตัวอักษรขาวกลืนพื้น */
html[data-a11y-contrast="high"] #take-result-review .quiz-review-choice-wrong {
  background-color: #450a0a !important;
  border-color: #f87171 !important;
  color: #fef2f2 !important;
}

html[data-a11y-contrast="high"] #take-result-review .quiz-review-choice-wrong *,
html[data-a11y-contrast="high"] #take-result-review .quiz-review-choice-wrong .text-slate-800,
html[data-a11y-contrast="high"] #take-result-review .quiz-review-choice-wrong .text-slate-500 {
  color: #fecaca !important;
}

html[data-a11y-contrast="high"] #take-result-review .quiz-review-choice-wrong [class*="border-slate-300"] {
  border-color: #fca5a5 !important;
  color: #fecaca !important;
}

/* YouTube lesson supplementary documents (course-learn + lesson-detail preview) */
html[data-a11y-contrast="high"] #player-youtube-resources,
html[data-a11y-contrast="high"] #preview-youtube-resources,
html[data-a11y-contrast="high"] #player-youtube-extra-desc,
html[data-a11y-contrast="high"] #preview-youtube-extra-desc {
  background-color: var(--hc-card) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-resources h3,
html[data-a11y-contrast="high"] .youtube-lesson-resources h4,
html[data-a11y-contrast="high"] .youtube-lesson-extra-desc h3,
html[data-a11y-contrast="high"] .youtube-lesson-extra-desc h4 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-extra-desc .text-slate-700 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-extra-desc .youtube-extra-quill-view__inner.ql-editor {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-extra-desc .youtube-extra-quill-view__inner.ql-editor a {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] #preview-instructions-body .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] .teacher-assessment-preview .question-text-body .youtube-extra-quill-view__inner.ql-editor {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #preview-instructions-body .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] .teacher-assessment-preview .question-text-body .youtube-extra-quill-view__inner.ql-editor a {
  color: var(--hc-link) !important;
}

/* quiz-take (ผู้เรียน): คำชี้แจง + ข้อความคำถามจาก Quill */
html[data-a11y-contrast="high"] #take-instructions-intro-body .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] #take-instructions-form-body .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] #take-result-instructions-body .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-instructions-intro-body .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] #take-instructions-form-body .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] #take-result-instructions-body .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor a,
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor a {
  color: var(--hc-link) !important;
}

/* Quill เก็บสีที่ span / class (เช่น .ql-color-*) — สีพาเรนต์ไม่ทับ inline/class ของลูก */
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor *,
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor *::before,
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor *::after,
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor *,
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor *::before,
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor *::after,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor *,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor *::before,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor *::after,
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor *,
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor *::before,
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor *::after {
  color: var(--hc-fg) !important;
}

/* quiz-take / survey-take: heading และตัวอักษรหัวข้อใน rich text ใช้เหลืองเพื่อเด่นบนพื้นดำ */
html[data-a11y-contrast="high"] #take-instructions-intro-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] #take-instructions-intro-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] #take-instructions-form-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] #take-instructions-form-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] #take-result-instructions-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] #take-result-instructions-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] .quiz-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] .survey-question-stem-wrap .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) * {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-resources a.focus-ring {
  background-color: var(--hc-sunk) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-resources a.focus-ring:hover {
  background-color: var(--hc-hover) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-resources a .text-slate-700,
html[data-a11y-contrast="high"] .youtube-lesson-resources a .text-slate-500 {
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] .youtube-lesson-resources a .text-sky-700 {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] #take-result-review .text-violet-800 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-result-review [class*="bg-violet-50"] {
  background-color: var(--hc-sunk) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #link-back-after {
  background-color: var(--hc-selected-bg) !important;
  color: var(--hc-selected-fg) !important;
  border: 1px solid var(--hc-selected-border) !important;
}

html[data-a11y-contrast="high"] #link-back-after:hover {
  background-color: var(--hc-accent-dark) !important;
  color: #000000 !important;
  border-color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-toolbar {
  background: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-bottom-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-font-group {
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-segment {
  background: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-right-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-segment:hover {
  background: var(--hc-hover) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-segment-active {
  background: var(--hc-selected-bg) !important;
  color: var(--hc-accent) !important;
  border: 1px solid var(--hc-selected-border) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-hc-btn {
  background: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-hc-btn:hover {
  background: var(--hc-hover) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-hc-btn[aria-pressed='true'] {
  background: var(--hc-selected-bg) !important;
  border-color: var(--hc-accent) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-hc-status {
  background: var(--hc-sunk) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-hc-btn[aria-pressed='true'] .dots-a11y-hc-status {
  background: var(--hc-accent-dark) !important;
  border-color: var(--hc-accent) !important;
  color: #000000 !important;
}

html[data-a11y-contrast="high"] .dots-a11y-help-btn {
  background: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-help-btn:hover {
  background: var(--hc-hover) !important;
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .dots-a11y-segment:focus-visible,
html[data-a11y-contrast="high"] .dots-a11y-hc-btn:focus-visible {
  outline: 2px solid var(--hc-accent) !important;
  outline-offset: 2px;
}

html[data-a11y-contrast="high"] .dots-a11y-hc-icon {
  border-color: var(--hc-accent);
  background: linear-gradient(90deg, #000000 50%, var(--hc-accent) 50%);
}

html[data-a11y-contrast="high"] body > header,
html[data-a11y-contrast="high"] main {
  background-color: var(--hc-bg) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border) !important;
}

/* <header> ภายในการ์ด (.bg-white) ให้สืบทอดสีพื้นจากการ์ด ไม่ใช่ --hc-bg */
html[data-a11y-contrast="high"] .bg-white header {
  background-color: inherit !important;
}

/* หัวข้อหลักในแถบบนและเนื้อหา — สีเหลืองเน้น (ทับ text-slate บนหัวข้อ) */
html[data-a11y-contrast="high"] header h1,
html[data-a11y-contrast="high"] header h2,
html[data-a11y-contrast="high"] main h1,
html[data-a11y-contrast="high"] main h2 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] header h1[class*='text-slate-'],
html[data-a11y-contrast="high"] header h2[class*='text-slate-'],
html[data-a11y-contrast="high"] main h1[class*='text-slate-'],
html[data-a11y-contrast="high"] main h2[class*='text-slate-'] {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] main h3,
html[data-a11y-contrast="high"] main h3[class*='text-slate-'] {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .focus-ring:focus-visible {
  outline-color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .bg-white,
html[data-a11y-contrast="high"] .bg-slate-50,
html[data-a11y-contrast="high"] .bg-slate-100 {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

/* Login / Register: body.bg-slate-100 ต้องใช้ --hc-bg เดียวกับ main เพื่อไม่ให้เห็น 2 สีดำ */
html[data-a11y-contrast="high"] body.bg-slate-100 {
  background-color: var(--hc-bg) !important;
}

/* Tailwind hover utilities: hover:bg-slate-50 / hover:bg-slate-100 */
html[data-a11y-contrast="high"] .hover\:bg-slate-50:hover,
html[data-a11y-contrast="high"] .hover\:bg-slate-100:hover {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .hover\:bg-slate-50:hover [class*="text-slate-"],
html[data-a11y-contrast="high"] .hover\:bg-slate-100:hover [class*="text-slate-"] {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .border-slate-100,
html[data-a11y-contrast="high"] .border-slate-200 {
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .text-slate-600,
html[data-a11y-contrast="high"] .text-slate-500,
html[data-a11y-contrast="high"] .text-slate-800 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] a.text-sky-600,
html[data-a11y-contrast="high"] .text-sky-600 {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] a:hover {
  text-decoration: underline;
}

html[data-a11y-contrast="high"] input,
html[data-a11y-contrast="high"] textarea,
html[data-a11y-contrast="high"] select {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .bg-sky-500,
html[data-a11y-contrast="high"] .bg-sky-600 {
  background-color: var(--hc-accent-dark) !important;
  color: #000000 !important;
}

html[data-a11y-contrast="high"] .hover\:bg-sky-600:hover {
  background-color: var(--hc-accent) !important;
  color: #000000 !important;
}

html[data-a11y-contrast="high"] #dashboard-section,
html[data-a11y-contrast="high"] #dashboard-section .bg-gradient-to-br {
  background: var(--hc-bg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] #dashboard-section h2,
html[data-a11y-contrast="high"] #dashboard-section h3 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #dashboard-section .text-white {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #dashboard-section .text-slate-300 {
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] #sidebar {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border) !important;
}

html[data-a11y-contrast="high"] #sidebar .text-slate-600,
html[data-a11y-contrast="high"] #sidebar .text-slate-500 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar details,
html[data-a11y-contrast="high"] #sidebar details summary {
  background-color: transparent !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar details a,
html[data-a11y-contrast="high"] #sidebar details button {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar details a:hover,
html[data-a11y-contrast="high"] #sidebar details button:hover {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar details ul {
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] #sidebar #user-info {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar #user-role-badge,
html[data-a11y-contrast="high"] #user-role-badge {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
  border: 1px solid var(--hc-border-strong) !important;
}

/*
 * หน้า login: <dialog> วิดีโอแนะนำ — ในโหมด HC ข้อความถูกบังคับเป็นสีอ่อนแต่พื้น dialog ของ UA ยังขาว จึงกลืนกัน
 */
html[data-a11y-contrast='high'] dialog.login-help-dialog {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border: 1px solid var(--hc-border-strong) !important;
}

html[data-a11y-contrast='high'] dialog.login-help-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82) !important;
}

html[data-a11y-contrast='high'] dialog.login-help-dialog h2 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast='high'] dialog.login-help-dialog p {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast='high'] dialog.login-help-dialog button {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast='high'] dialog.login-help-dialog button:hover {
  background-color: var(--hc-sunk) !important;
}

html[data-a11y-contrast='high'] #line-support-modal .bg-white {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #line-support-modal h2,
html[data-a11y-contrast="high"] #line-support-modal p,
html[data-a11y-contrast="high"] #line-support-modal .text-slate-800,
html[data-a11y-contrast="high"] #line-support-modal .text-slate-600 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #line-support-modal .border-slate-200,
html[data-a11y-contrast="high"] #line-support-modal .bg-slate-50 {
  border-color: var(--hc-border-strong) !important;
  background-color: var(--hc-hover) !important;
}

html[data-a11y-contrast="high"] #post-modal .bg-white,
html[data-a11y-contrast="high"] #comment-modal .bg-white {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #post-modal,
html[data-a11y-contrast="high"] #comment-modal {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] main label,
html[data-a11y-contrast="high"] #post-modal label,
html[data-a11y-contrast="high"] #comment-modal label {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] main [class*="text-slate-"],
html[data-a11y-contrast="high"] #post-modal [class*="text-slate-"],
html[data-a11y-contrast="high"] #comment-modal [class*="text-slate-"] {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar [class*="text-slate-"] {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] main [class*="text-sky-"],
html[data-a11y-contrast="high"] #sidebar [class*="text-sky-"] {
  color: var(--hc-link) !important;
}

/* แดชบอร์ดผู้เรียน: เปอร์เซ็นต์ความคืบหน้า — ทับกฎ text-sky บน main + พื้น sky-100 จากธีม (เดิมกลืนกัน) */
html[data-a11y-contrast="high"] #dashboard-section .dash-progress-pct {
  background-color: var(--hc-selected-bg) !important;
  color: var(--hc-selected-fg) !important;
  border-color: var(--hc-selected-border) !important;
}

/* รายการ sidemenu ที่ active: พื้นดำลึก + ข้อความและขอบเหลือง */
html[data-a11y-contrast="high"] #sidebar .bg-sky-50,
html[data-a11y-contrast="high"] #sidebar a.bg-sky-50[class*='text-sky-'] {
  background-color: var(--hc-sunk) !important;
  color: var(--hc-accent) !important;
  border-color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #sidebar .bg-sky-50 [class*='text-sky-'],
html[data-a11y-contrast="high"] #sidebar .bg-sky-50 [class*='text-slate-'],
html[data-a11y-contrast="high"] #sidebar .bg-sky-50 i {
  color: var(--hc-accent) !important;
}

/* ลิงก์เมนูที่ไม่ใช่หน้าปัจจุบัน: hover เดิมเป็น bg สว่าง + text-sky (เหลือง) อ่านไม่ชัด — ใช้พื้นเทาเข้ม + ข้อความขาว */
html[data-a11y-contrast="high"] #sidebar nav a:hover:not(.bg-sky-50) {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar nav a:hover:not(.bg-sky-50) i,
html[data-a11y-contrast="high"] #sidebar nav a:hover:not(.bg-sky-50) span {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar details.group[open] {
  background-color: var(--hc-sunk) !important;
  border-left-color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #sidebar details.group summary .font-medium {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #sidebar details.group summary:hover {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #sidebar details.group summary:hover .font-medium,
html[data-a11y-contrast="high"] #sidebar details.group summary:hover i {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] main [class*='text-violet-'],
html[data-a11y-contrast="high"] main [class*='text-purple-'] {
  color: var(--hc-link) !important;
}

/* course-learn: ปุ่ม "กำกับว่าเสร็จสิ้น" (สถานะยังไม่เสร็จ) ให้คอนทราสต์ชัดในโหมด HC */
html[data-a11y-contrast="high"] #btn-mark-complete.btn-mark-complete-pending {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
  border: 1px solid var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] #btn-mark-complete.btn-mark-complete-pending:hover {
  background-color: var(--hc-selected-bg) !important;
  color: var(--hc-selected-fg) !important;
  border-color: var(--hc-selected-border) !important;
}

/* Completed lesson row */
html[data-a11y-contrast="high"] button.lesson-btn.bg-emerald-50 {
  background-color: #064e3b !important;
  color: #ecfdf5 !important;
  border-color: #34d399 !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.bg-emerald-50:hover {
  background-color: #047857 !important;
  color: #ffffff !important;
  border-color: #6ee7b7 !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.bg-emerald-50 .text-emerald-500,
html[data-a11y-contrast="high"] button.lesson-btn.bg-emerald-50 .text-emerald-700,
html[data-a11y-contrast="high"] button.lesson-btn.bg-emerald-50 .text-emerald-800,
html[data-a11y-contrast="high"] button.lesson-btn.bg-emerald-50 .text-slate-400 {
  color: #d1fae5 !important;
}

/* my-learning (คอร์สเรียนจบแล้ว): ปุ่ม "ดูอีกครั้ง" เดิม text-emerald-700 + bg-emerald-100 */
html[data-a11y-contrast="high"] #enrolled-completed a.text-emerald-700.bg-emerald-100 {
  background-color: var(--hc-selected-bg) !important;
  border-color: var(--hc-selected-border) !important;
  color: var(--hc-selected-fg) !important;
}

html[data-a11y-contrast="high"] #enrolled-completed a.text-emerald-700.bg-emerald-100:hover,
html[data-a11y-contrast="high"] #enrolled-completed a.text-emerald-700.bg-emerald-100.hover\:bg-emerald-200:hover {
  background-color: var(--hc-accent-dark) !important;
  border-color: var(--hc-accent) !important;
  color: #000000 !important;
}

html[data-a11y-contrast="high"] #enrolled-completed a.text-emerald-700.bg-emerald-100 i {
  color: inherit !important;
}

/* Unlocked lesson row */
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover {
  background-color: var(--hc-hover) !important;
  color: #ffffff !important;
  border-color: #9ca3af !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) .text-slate-700,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) .text-slate-300,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) .text-slate-400,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) .text-emerald-700,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) .text-amber-700,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50) .text-red-600 {
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover .text-slate-700,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover .text-slate-300,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover .text-slate-400,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover .text-emerald-700,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover .text-amber-700,
html[data-a11y-contrast="high"] button.lesson-btn.border-transparent:not(.bg-emerald-50):not(.bg-slate-50):hover .text-red-600 {
  color: #ffffff !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.bg-slate-50 {
  background-color: var(--hc-hover) !important;
  color: #9ca3af !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] button.lesson-btn.bg-slate-50:hover {
  background-color: #6b7280 !important;
  color: var(--hc-fg) !important;
}

/* Amber chips (prerequisite, submit hint) */
html[data-a11y-contrast="high"] #quiz-submit-hint,
html[data-a11y-contrast="high"] main span.text-amber-700.bg-amber-100,
html[data-a11y-contrast="high"] main span.text-amber-700.bg-amber-50,
html[data-a11y-contrast="high"] main span.inline-flex.text-amber-700.bg-amber-100,
html[data-a11y-contrast="high"] main span.inline-flex.text-amber-700.bg-amber-50 {
  background-color: #451a03 !important;
  border-color: #fbbf24 !important;
  color: #fffbeb !important;
}

html[data-a11y-contrast="high"] #discussion-gate-banner {
  background-color: #422006 !important;
  border-color: #fbbf24 !important;
  color: #fffbeb !important;
}

html[data-a11y-contrast="high"] #discussion-gate-banner p,
html[data-a11y-contrast="high"] #discussion-gate-banner i,
html[data-a11y-contrast="high"] #discussion-gate-banner [class*="text-amber"],
html[data-a11y-contrast="high"] #discussion-gate-banner .font-medium {
  color: #fffbeb !important;
}

/* course-learn: แบนเนอร์โหมดทดลอง (กัน text-violet + bg-violet-50 กลืนใน HC) */
html[data-a11y-contrast="high"] #trial-learn-banner {
  background-color: #2e1065 !important;
  border-color: #c4b5fd !important;
  color: #f5f3ff !important;
}

html[data-a11y-contrast="high"] #trial-learn-banner i,
html[data-a11y-contrast="high"] #trial-learn-banner [class*="text-violet"] {
  color: #f5f3ff !important;
}

html[data-a11y-contrast="high"] .text-amber-700:not([class*="bg-amber"]):not([class*="bg-white"]),
html[data-a11y-contrast="high"] .text-amber-800:not([class*="bg-amber"]):not([class*="bg-white"]),
html[data-a11y-contrast="high"] .text-amber-950:not([class*="bg-amber"]) {
  color: #fcd34d !important;
}

html[data-a11y-contrast="high"] .text-red-700,
html[data-a11y-contrast="high"] .text-red-800,
html[data-a11y-contrast="high"] .text-red-900 {
  color: #fecaca !important;
}

html[data-a11y-contrast="high"] .prose,
html[data-a11y-contrast="high"] .prose-slate {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .prose a {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] #take-instructions-intro-body,
html[data-a11y-contrast="high"] #take-instructions-intro-body *,
html[data-a11y-contrast="high"] #take-instructions-form-body,
html[data-a11y-contrast="high"] #take-instructions-form-body *,
html[data-a11y-contrast="high"] #take-result-instructions-body,
html[data-a11y-contrast="high"] #take-result-instructions-body *,
html[data-a11y-contrast="high"] #take-intro-instructions,
html[data-a11y-contrast="high"] #take-intro-instructions *,
html[data-a11y-contrast="high"] #survey-form-instructions,
html[data-a11y-contrast="high"] #survey-form-instructions * {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-instructions-intro-body a,
html[data-a11y-contrast="high"] #take-instructions-form-body a,
html[data-a11y-contrast="high"] #take-result-instructions-body a,
html[data-a11y-contrast="high"] #take-intro-instructions a,
html[data-a11y-contrast="high"] #survey-form-instructions a {
  color: var(--hc-link) !important;
}

/* survey-take: กล่องคำอธิบายแบบสำรวจ (bg-slate-50) — พื้น/ขอบให้ตัดกับตัวอักษรใน HC */
html[data-a11y-contrast="high"] #survey-form-instructions {
  background-color: var(--hc-sunk) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-intro-instructions .youtube-extra-quill-view__inner.ql-editor,
html[data-a11y-contrast="high"] #survey-form-instructions .youtube-extra-quill-view__inner.ql-editor {
  background-color: transparent !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #take-intro-instructions [class*="ql-color"],
html[data-a11y-contrast="high"] #survey-form-instructions [class*="ql-color"],
html[data-a11y-contrast="high"] #take-instructions-intro-body [class*="ql-color"],
html[data-a11y-contrast="high"] #take-instructions-form-body [class*="ql-color"],
html[data-a11y-contrast="high"] #take-intro-instructions [style*="color:"],
html[data-a11y-contrast="high"] #survey-form-instructions [style*="color:"],
html[data-a11y-contrast="high"] #take-instructions-intro-body [style*="color:"],
html[data-a11y-contrast="high"] #take-instructions-form-body [style*="color:"] {
  color: var(--hc-fg) !important;
}

/* คำอธิบาย/คำชี้แจงจาก Quill: ลบพื้นขาว (inline/class) ที่ทำให้ข้อความกลืนใน HC */
html[data-a11y-contrast="high"] #take-intro-instructions :is(p, li, span, div, blockquote, pre, td, th),
html[data-a11y-contrast="high"] #survey-form-instructions :is(p, li, span, div, blockquote, pre, td, th),
html[data-a11y-contrast="high"] #take-instructions-intro-body :is(p, li, span, div, blockquote, pre, td, th),
html[data-a11y-contrast="high"] #take-instructions-form-body :is(p, li, span, div, blockquote, pre, td, th),
html[data-a11y-contrast="high"] #take-result-instructions-body :is(p, li, span, div, blockquote, pre, td, th),
html[data-a11y-contrast="high"] #take-intro-instructions [class*="ql-bg"],
html[data-a11y-contrast="high"] #survey-form-instructions [class*="ql-bg"],
html[data-a11y-contrast="high"] #take-instructions-intro-body [class*="ql-bg"],
html[data-a11y-contrast="high"] #take-instructions-form-body [class*="ql-bg"],
html[data-a11y-contrast="high"] #take-intro-instructions [style*="background"],
html[data-a11y-contrast="high"] #survey-form-instructions [style*="background"],
html[data-a11y-contrast="high"] #take-instructions-intro-body [style*="background"],
html[data-a11y-contrast="high"] #take-instructions-form-body [style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-a11y-contrast="high"] #take-intro-instructions .ql-editor,
html[data-a11y-contrast="high"] #survey-form-instructions .ql-editor,
html[data-a11y-contrast="high"] #take-instructions-intro-body .ql-editor,
html[data-a11y-contrast="high"] #take-instructions-form-body .ql-editor {
  background-color: transparent !important;
}

html[data-a11y-contrast="high"] .discussion-body,
html[data-a11y-contrast="high"] .comment-body,
html[data-a11y-contrast="high"] #post-body-context {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .discussion-body *,
html[data-a11y-contrast="high"] .comment-body *,
html[data-a11y-contrast="high"] #post-body-context * {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .discussion-body a,
html[data-a11y-contrast="high"] .comment-body a,
html[data-a11y-contrast="high"] #post-body-context a {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] .quiz-question-text,
html[data-a11y-contrast="high"] .quiz-question-text *,
html[data-a11y-contrast="high"] .survey-question-stem-wrap,
html[data-a11y-contrast="high"] .survey-question-stem-wrap *,
html[data-a11y-contrast="high"] .survey-question-inline,
html[data-a11y-contrast="high"] .survey-question-inline * {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .quiz-question-text a,
html[data-a11y-contrast="high"] .survey-question-stem-wrap a,
html[data-a11y-contrast="high"] .survey-question-inline a {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] .course-lesson-prose {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .course-lesson-prose a {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] .ql-toolbar {
  background-color: var(--hc-hover) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .ql-toolbar .ql-stroke {
  stroke: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .ql-toolbar .ql-fill {
  fill: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .ql-editor {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .enrolled-card {
  background-color: var(--hc-card) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .enrolled-card .border-sky-100,
html[data-a11y-contrast="high"] .enrolled-card .border-emerald-100 {
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .enrolled-card [class*="bg-white/"] {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .enrolled-card .text-sky-700 {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] .enrolled-card .text-emerald-700 {
  color: #6ee7b7 !important;
}

html[data-a11y-contrast="high"] ::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

html[data-a11y-contrast="high"] .discussion-comments-section {
  background-color: var(--hc-sunk) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .discussion-comments-section .bg-white {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .discussion-comments-section .border-slate-200 {
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .discussion-comments-section .comment-item {
  background-color: var(--hc-card) !important;
  border: 1px solid var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .discussion-comments-section .comment-item .bg-sky-100 {
  background-color: var(--hc-selected-bg) !important;
  color: var(--hc-selected-fg) !important;
}

html[data-a11y-contrast="high"] .discussion-comments-section .comment-item .text-sky-600 {
  color: var(--hc-link) !important;
}

html[data-a11y-contrast="high"] #skip-to-reply,
html[data-a11y-contrast="high"] #skip-to-short-quiz {
  background-color: var(--hc-selected-bg) !important;
  color: var(--hc-selected-fg) !important;
  border-color: var(--hc-selected-border) !important;
}

html[data-a11y-contrast="high"] #skip-to-reply:hover,
html[data-a11y-contrast="high"] #skip-to-short-quiz:hover {
  background-color: var(--hc-accent-dark) !important;
  color: #000000 !important;
  border-color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] #skip-to-reply i,
html[data-a11y-contrast="high"] #skip-to-short-quiz i {
  color: inherit !important;
}

html[data-a11y-contrast="high"] #online-presence-toggle {
  opacity: 1 !important;
}

html[data-a11y-contrast="high"] #online-presence-toggle:hover {
  opacity: 1 !important;
}

html[data-a11y-contrast="high"] #online-presence-bar .text-slate-500,
html[data-a11y-contrast="high"] #online-presence-bar .text-slate-700 {
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] #online-presence-panel {
  background-color: var(--hc-card) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #online-presence-panel .sticky {
  background-color: var(--hc-hover) !important;
  color: var(--hc-fg) !important;
  border-bottom-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] #online-presence-panel .text-slate-500 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #online-presence-panel .text-slate-700 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #online-presence-panel .bg-slate-200,
html[data-a11y-contrast="high"] #online-presence-panel .from-slate-200 {
  background-color: #4b5563 !important;
  color: var(--hc-fg) !important;
}

/*
 * quiz-take / survey-take และ quiz-detail / survey-detail (teacher preview):
 * ให้สีพื้น/ตัวอักษรใน main สอดคล้องกันในโหมด HC — โดยเฉพาะคลาสที่กฎทั่วไปยังไม่ครอบคลุม
 */
html[data-a11y-contrast="high"] main .text-slate-700 {
  color: var(--hc-fg) !important;
}

/*
 * คำชี้แจง + ข้อความคำถาม (rich text / typography plugin):
 * ลูกของ .prose ถูกกำหนดสีเอง (เช่น :where(p)) จึงไม่สืบทอดจาก .prose — ต้องบังคับทุก descendant ให้เป็น hc-fg
 */
html[data-a11y-contrast="high"] body.teacher-assessment-preview #preview-instructions-body,
html[data-a11y-contrast="high"] body.teacher-assessment-preview #preview-instructions-body *,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main #preview-instructions,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main #preview-instructions *,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main .question-text-body,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main .question-text-body * {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] body.teacher-assessment-preview #preview-instructions-body a,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main #preview-instructions a,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main .question-text-body a {
  color: var(--hc-link) !important;
}

/* quiz-detail / survey-detail: heading และตัวอักษรหัวข้อใน rich text ใช้เหลืองให้ preview ตรงกับฝั่งผู้เรียน */
html[data-a11y-contrast="high"] body.teacher-assessment-preview #preview-instructions-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] body.teacher-assessment-preview #preview-instructions-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main #preview-instructions .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] body.teacher-assessment-preview main #preview-instructions .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) *,
html[data-a11y-contrast="high"] body.teacher-assessment-preview main .question-text-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge),
html[data-a11y-contrast="high"] body.teacher-assessment-preview main .question-text-body .youtube-extra-quill-view__inner.ql-editor :is(h1, h2, h3, h4, h5, h6, .ql-size-large, .ql-size-huge) * {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] main [class*="bg-slate-50/"] {
  background-color: var(--hc-sunk) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] main #questions-container .border-emerald-400.bg-emerald-50,
html[data-a11y-contrast="high"] main #questions-container .bg-emerald-50 {
  background-color: #052e16 !important;
  border-color: #34d399 !important;
  color: #ecfdf5 !important;
}

html[data-a11y-contrast="high"] main #questions-container .border-emerald-400.bg-emerald-50 .text-slate-700,
html[data-a11y-contrast="high"] main #questions-container .bg-emerald-50 .text-slate-600 {
  color: #d1fae5 !important;
}

/* Modal แก้ไขคำถาม / ตั้งค่าแบบทดสอบ (quiz-detail, survey-detail) */
html[data-a11y-contrast="high"] #question-modal,
html[data-a11y-contrast="high"] #quiz-settings-modal,
html[data-a11y-contrast="high"] #question-edit-modal {
  background-color: rgba(0, 0, 0, 0.82) !important;
}

html[data-a11y-contrast="high"] #question-modal .bg-white,
html[data-a11y-contrast="high"] #quiz-settings-modal .bg-white,
html[data-a11y-contrast="high"] #question-edit-modal .bg-white {
  background-color: var(--hc-card) !important;
  color: var(--hc-fg) !important;
  border-color: var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] #question-modal .text-slate-800,
html[data-a11y-contrast="high"] #quiz-settings-modal .text-slate-800,
html[data-a11y-contrast="high"] #question-edit-modal .text-slate-800,
html[data-a11y-contrast="high"] #question-modal .text-slate-700,
html[data-a11y-contrast="high"] #quiz-settings-modal .text-slate-700,
html[data-a11y-contrast="high"] #question-edit-modal .text-slate-700,
html[data-a11y-contrast="high"] #question-modal .text-slate-500,
html[data-a11y-contrast="high"] #quiz-settings-modal .text-slate-500,
html[data-a11y-contrast="high"] #question-edit-modal .text-slate-500 {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #question-modal label,
html[data-a11y-contrast="high"] #quiz-settings-modal label,
html[data-a11y-contrast="high"] #question-edit-modal label {
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] #question-modal .hover\:bg-slate-100:hover,
html[data-a11y-contrast="high"] #quiz-settings-modal .hover\:bg-slate-100:hover,
html[data-a11y-contrast="high"] #question-edit-modal .hover\:bg-slate-100:hover {
  background-color: var(--hc-hover) !important;
}

/* แบนเนอร์ “มุมมองตัวอย่าง” บนหน้า teacher preview */
/* my-certificates: การ์ดใบประกาศ (bg-amber-50 กลืนกับ text ขาวใน HC) */
html[data-a11y-contrast="high"] .cert-card {
  background-color: var(--hc-card) !important;
  border-color: var(--hc-border-strong) !important;
  color: var(--hc-fg) !important;
}

html[data-a11y-contrast="high"] .cert-card h5 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .cert-card .text-amber-500 {
  color: var(--hc-accent) !important;
}

html[data-a11y-contrast="high"] .cert-card .text-slate-600,
html[data-a11y-contrast="high"] .cert-card .text-slate-500 {
  color: var(--hc-muted) !important;
}

html[data-a11y-contrast="high"] .cert-card code {
  background-color: var(--hc-sunk) !important;
  color: var(--hc-fg) !important;
  border: 1px solid var(--hc-border-strong) !important;
}

html[data-a11y-contrast="high"] .cert-card .bg-amber-600 {
  background-color: var(--hc-accent-dark) !important;
  color: #000000 !important;
}

html[data-a11y-contrast="high"] .cert-card .bg-amber-600:hover,
html[data-a11y-contrast="high"] .cert-card .hover\:bg-amber-700:hover {
  background-color: var(--hc-accent) !important;
  color: #000000 !important;
}

/* แบนเนอร์ "มุมมองตัวอย่าง" บนหน้า teacher preview */
html[data-a11y-contrast="high"] body.teacher-assessment-preview main p.text-amber-600.bg-amber-50 {
  background-color: #451a03 !important;
  border-color: #fbbf24 !important;
  color: #fffbeb !important;
}

html[data-a11y-contrast="high"] body.teacher-assessment-preview main p.text-amber-600.bg-amber-50 i {
  color: inherit !important;
}

html[data-a11y-contrast="high"] body.teacher-assessment-preview main p.text-violet-600.bg-violet-50 {
  background-color: #2e1065 !important;
  border-color: #a78bfa !important;
  color: #f5f3ff !important;
}

html[data-a11y-contrast="high"] body.teacher-assessment-preview main p.text-violet-600.bg-violet-50 i {
  color: inherit !important;
}