/* Mobile article chrome: preserve room for the brand and keep the audio bar compact. */
@media (max-width: 480px) {
  body > header > div:first-child {
    padding: 10px 12px !important;
    gap: 8px;
  }

  body > header > div:first-child > a {
    min-width: 0;
    margin-left: 0 !important;
    gap: 6px !important;
  }

  body > header > div:first-child > a > div {
    min-width: 0;
  }

  body > header > div:first-child > a > div > div:last-child {
    display: none;
  }

  body > header > div:first-child > div:last-child {
    flex-shrink: 0;
    gap: 6px !important;
  }

  body > header > div:first-child > div:last-child .btn {
    white-space: nowrap;
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
  }

  .smart-audio-bar .audio-sub-hint {
    display: none;
  }

  body {
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-toc-overlay {
    visibility: hidden;
  }

  .mobile-toc-overlay.show {
    visibility: visible;
  }
}

@media (max-width: 480px) {
  #mobileTocBtn {
    left: 8px !important;
    width: 44px;
    height: 44px;
    padding: 8px !important;
    justify-content: center;
  }

  #mobileTocBtn .toc-btn-text {
    display: none;
  }

  body > header > div:first-child > a {
    margin-left: 52px !important;
  }

  .narrator-onboard-tooltip {
    display: none;
  }

  .toan-thay-an-watermark {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body > header > div:first-child > a > span:first-child {
    display: none;
  }

  body > header > div:first-child > a > div > div:first-child {
    font-size: 0.78rem !important;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  body > header > div:first-child {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  body > header > div:first-child > a {
    flex: 1 1 calc(100% - 52px) !important;
  }

  body > header > div:first-child > div:last-child {
    margin-left: auto;
  }
}

/* WCAG AA text contrast corrections shared by all published lessons. */
.trap-compare-header {
  color: #b91c1c !important;
}

.trap-item-note .karaoke-word:not(.active-word) {
  color: #475569 !important;
}

.article-breadcrumb a {
  color: #1d4ed8 !important;
}

.meta-tag-pill.green,
.quiz-part-badge {
  color: #047857 !important;
}

.meta-tag-pill.amber {
  color: #b45309 !important;
}

.btn-check-answer {
  background: #1d4ed8 !important;
  color: #fff !important;
}

.quiz-mode-pill[data-mode="exam"] {
  color: #b91c1c !important;
}

.trap-col-correct .trap-col-title {
  color: #047857 !important;
}

.trap-col-wrong .trap-col-title {
  color: #b91c1c !important;
}

.hero-label {
  background: #1d4ed8 !important;
  color: #fff !important;
}

.share-buttons-bar .share-fb {
  background-color: #0b5fcc !important;
  color: #fff !important;
}

.visual-anchor-box [style*="color: var(--primary)"] {
  color: #1d4ed8 !important;
}

.bloom-lab-badge.b1 { color: #0369a1 !important; }
.bloom-lab-badge.b2 { color: #15803d !important; }
.bloom-lab-badge.b3 { color: #b45309 !important; }

.warmup-opt.correct {
  background: #047857 !important;
  border-color: #047857 !important;
}

.warmup-opt.wrong {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  opacity: 1;
}

[data-theme="dark"] .article-breadcrumb a,
[data-theme="dark"] .warmup-header,
[data-theme="dark"] .visual-anchor-box [style*="color: var(--primary)"] {
  color: #93c5fd !important;
}

[data-theme="dark"] .quiz-mode-pill[data-mode="exam"] {
  color: #fca5a5 !important;
}

[data-theme="dark"] .trap-col-correct .trap-col-title {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .trap-col-wrong .trap-col-title {
  color: #fca5a5 !important;
}

[data-theme="dark"] .trap-item-note .karaoke-word:not(.active-word) {
  color: #cbd5e1 !important;
}

.narrator-onboard-tooltip {
  background: #1d4ed8 !important;
  color: #fff !important;
}

[data-theme="dark"] .trap-compare-header {
  color: #fca5a5 !important;
}

/* Contrast for interactive math and annotation widgets used in lesson templates. */
.btn-lab-check {
  background: #1d4ed8 !important;
  color: #fff !important;
}

.hint-btn {
  color: #047857 !important;
}

.article-body .callout-tip .callout-header {
  color: #047857 !important;
}

.article-body [style*="text-muted"] {
  color: #475569 !important;
}

.article-body [style*="color: #dc2626"],
.article-body [style*="color:#dc2626"] {
  color: #b91c1c !important;
}

.article-body [style*="color: #059669"],
.article-body [style*="color:#059669"] {
  color: #047857 !important;
}

.article-body [style*="color: #d97706"],
.article-body [style*="color:#d97706"] {
  color: #92400e !important;
}

.article-body #btnToggleAngle {
  color: #047857 !important;
}

.article-body #btnToggleHeight {
  color: #92400e !important;
}

.article-body .katex [style*="color: #059669"],
.article-body .katex [style*="color:#059669"] {
  color: #047857 !important;
}

.article-body .katex [style*="color: #d97706"],
.article-body .katex [style*="color:#d97706"] {
  color: #92400e !important;
}

[data-theme="dark"] .hint-btn,
[data-theme="dark"] .article-body .callout-tip .callout-header {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .article-body [style*="text-muted"] {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .article-body .karaoke-word:not(.active-word) {
  color: #93c5fd !important;
}


/* Keep the introductory outcomes card compact within article typography rules. */
.article-body .lesson-outcomes h2.callout-header {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

@media (max-width: 480px) {
  .section-step-divider .step-divider-label {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 55vw;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }

  .katex-display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: 0 2px 6px;
  }

  .katex-display > .katex {
    max-width: 100%;
  }
}

[data-theme="dark"] .article-body [style*="color: var(--primary)"] {
  color: #93c5fd !important;
}

[data-theme="dark"] .article-body [style*="color: #059669"],
[data-theme="dark"] .article-body [style*="color:#059669"] {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .article-body [style*="color: #2563eb"],
[data-theme="dark"] .article-body [style*="color:#2563eb"] {
  color: #93c5fd !important;
}

[data-theme="dark"] .article-body [style*="color: #d97706"],
[data-theme="dark"] .article-body [style*="color:#d97706"] {
  color: #fcd34d !important;
}

/* Contain wide true/false matrices within the question, with keyboard scrolling. */
.article-body .quiz-tf-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Keep both controls in the distributive-area visual reachable on narrow screens. */
@media (max-width: 480px) {
  .article-body .visual-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    max-width: 100%;
  }

  .article-body .visual-controls input[type="range"] {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 100%;
    width: auto !important;
    margin-right: 0 !important;
  }
}

/* Give touch users a comfortable hit area for lesson controls. */
@media (pointer: coarse) {
  .article-body button,
  .mobile-toc-drawer .toc-drawer-close,
  body > header button,
  .smart-audio-bar button {
    min-width: 44px;
    min-height: 44px;
  }

  .article-body .tf-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}