/* ============================================================
   Dark theme override — matches owenhayes.design aesthetic
   Injected via patch-rise.sh on every republish
   Last updated: accent colour pass
   ============================================================

   Colour palette
   --bg-page:    #0f1117  (page shell — matches site)
   --bg-surface: #13151e  (raised surface / content wrapper)
   --bg-card:    #1a1d2e  (interactive cards, tabs, quiz blocks)
   --bg-inset:   #1e2236  (inset / nested elements)
   --border:     #2a2d3e  (dividers and borders)
   --text-body:  #cbd5e1  (readable body text)
   --text-head:  #f1f5f9  (headings)
   --text-muted: #64748b  (secondary / placeholder)

   Accent logic (matches owenhayes.design):
   Purple #7836cf = primary / interactive  (buttons, header, badges)
   Cyan   #0debd8 = decorative accent      (rules, links, bold, emphasis)
   ============================================================ */

/* ── 1. Page shell ── */
html,
body,
.lesson__content {
  background-color: #0f1117 !important;
  color: #cbd5e1 !important;
}

/* ── 2. Content wrapper (the main white card) ── */
.page__wrapper,
.page__wrapper--white,
.blocks-lesson {
  background-color: #13151e !important;
}

/* ── 3. Rise "light" utility classes — cover all block types at once ── */
.bg--card-white,
.bg--type-light,
.bg--type-color,
.bg--range-light.bg--type-light,
.bg--range-light.bg--type-color {
  background-color: #1a1d2e !important;
}

/* ── 4. Block text areas ── */
.block-text,
.block-text__content {
  background-color: #13151e !important;
}

/* ── 5. Cards (flip cards, process cards, general cards) ── */
.block-card,
.block-card--white,
.block-process-card,
.playing-card__content {
  background-color: #1a1d2e !important;
  border-color: #2a2d3e !important;
}

/* ── 6. Tabs ── */
.blocks-tabs {
  background-color: #1a1d2e !important;
}

.blocks-tabs__header {
  background-color: #13151e !important;
  border-bottom-color: #2a2d3e !important;
}

.blocks-tabs__header-item {
  background-color: #13151e !important;
  border-color: #2a2d3e !important;
  color: #64748b !important;
}

.blocks-tabs__header-item--active {
  background-color: #1a1d2e !important;
  color: #7836cf !important;
  border-bottom-color: #1a1d2e !important;
}

.blocks-tabs__header-item--after-active {
  background-color: #13151e !important;
  border-color: #2a2d3e !important;
}

.blocks-tabs__content-item {
  background-color: #1a1d2e !important;
  color: #cbd5e1 !important;
}

/* ── 7. Knowledge check / quiz ── */
.block-knowledge,
.block-knowledge__wrapper,
.block-knowledge__container {
  background-color: #1a1d2e !important;
  color: #cbd5e1 !important;
}

.block-knowledge__row,
.block-knowledge__col,
.block-knowledge__media {
  background-color: #1a1d2e !important;
}

.block-knowledge__retake,
.block-knowledge__retake-container {
  background-color: #13151e !important;
  color: #cbd5e1 !important;
}

.quiz-card__feedback-wrap {
  background-color: #1e2236 !important;
  color: #cbd5e1 !important;
  border-color: #2a2d3e !important;
}

/* ── 8. Sorting / matching activity ── */
.block-sorting-activity {
  background-color: #1a1d2e !important;
  color: #cbd5e1 !important;
}

/* Draggable cards — slightly raised so they read as grabbable objects */
.playing-card__content {
  background-color: #252840 !important;
  border-color: rgba(13, 235, 216, 0.25) !important;
  border-style: solid !important;
  border-width: 1px !important;
}

/* Drop zones — clearly empty, clearly a target */
.pile__wrap {
  background-color: rgba(13, 235, 216, 0.04) !important;
  border-color: rgba(13, 235, 216, 0.35) !important;
  border-style: dashed !important;
}

/* ── 9. Process block ── */
.block-process,
.block-process-carousel {
  background-color: #1a1d2e !important;
  border: 1px solid #2a2d3e !important;
  border-radius: 4px !important;
}

.block-process-card__title {
  color: #f1f5f9 !important;
}

.block-process-card__description {
  color: #cbd5e1 !important;
}

/* ── 10. Global text colour overrides for light-bg elements ── */
.bg--card-white *,
.bg--type-light *,
.bg--type-color *,
.block-card *,
.block-knowledge *,
.block-process *,
.blocks-tabs__content-item * {
  color: #cbd5e1 !important;
}

/* Preserve heading weight and bump brightness */
.bg--card-white h1,
.bg--card-white h2,
.bg--card-white h3,
.bg--type-light h1,
.bg--type-light h2,
.bg--type-light h3,
.block-card h1,
.block-card h2,
.block-card h3,
.blocks-tabs__content-item h1,
.blocks-tabs__content-item h2,
.blocks-tabs__content-item h3,
.block-knowledge h1,
.block-knowledge h2,
.block-knowledge h3 {
  color: #f1f5f9 !important;
}

/* ── 11. Tab/border dividers ── */
[class*="block-"] {
  border-color: #2a2d3e !important;
}

/* ── 12. Course navigation bar ── */
.course-navigation,
.course-navigation__bar,
.course-navigation__lessonNav {
  background-color: #13151e !important;
  border-color: #2a2d3e !important;
}

.course-navigation__progress {
  background-color: #1e2236 !important;
}

/* ── 13. Override tint (light purple → dark purple) ── */
:root {
  --color-theme-tint: #1a1030 !important;
}

[style*="background-color: rgb(242, 235, 250)"],
[style*="background: rgb(242, 235, 250)"] {
  background-color: #1a1030 !important;
}

/* ── 14. Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f1117; }
::-webkit-scrollbar-thumb { background: #7836cf; border-radius: 3px; }

/* ══════════════════════════════════════════════════
   ACCENT COLOUR PASS
   Purple = interactive/primary  Cyan = decorative/emphasis
   ══════════════════════════════════════════════════ */

/* ── 15. Decorative divider lines above headings → cyan ──
   These are short ornamental rules (same role as the intro
   screen's accent-line) — not interactive, so cyan not purple */
.block-statement__divider-top,
.block-statement__divider-bottom {
  background-color: #0debd8 !important;
}

/* ── 16. Links & underlined text → cyan ──
   Rise uses <u> tags for underlined text (not <a>),
   so we target both */
a:not([class*="btn"]):not([class*="continue"]):not([class*="nav"]):not([class*="skip"]) {
  color: #0debd8 !important;
  text-decoration-color: rgba(13, 235, 216, 0.4) !important;
}

a:not([class*="btn"]):not([class*="continue"]):not([class*="nav"]):not([class*="skip"]):hover {
  color: #fff !important;
  text-decoration-color: #0debd8 !important;
}

.blocks-lesson u,
.bg--card-white u,
.bg--type-light u,
.blocks-tabs__content-item u,
.block-knowledge u {
  color: #0debd8 !important;
  text-decoration-color: rgba(13, 235, 216, 0.4) !important;
}

/* ── 17. Bold / strong emphasis → cyan ──
   Makes emphasis text stand out from body copy with the
   site's secondary accent colour */
.blocks-lesson strong,
.blocks-lesson b,
.bg--card-white strong,
.bg--card-white b,
.bg--type-light strong,
.bg--type-light b,
.blocks-tabs__content-item strong,
.blocks-tabs__content-item b,
.block-knowledge strong,
.block-knowledge b {
  color: #0debd8 !important;
}

/* ── 18. Active tab underline → cyan ──
   Tab label stays purple (it's interactive), but the
   bottom-border accent indicator uses the cyan accent */
.blocks-tabs__header-item--active {
  box-shadow: inset 0 -3px 0 0 #0debd8 !important;
}

/* ── 19. Progress bar fill → cyan ──
   Gives the lesson progress fill a premium accent feel */
[class*="progress__fill"],
[class*="progress-fill"],
[class*="progressFill"],
.course-navigation__progress-fill {
  background-color: #0debd8 !important;
}

/* ── 20. Sorting drop zones → cyan dashed border ──
   Makes the drag target obvious and on-brand */
[class*="sorting-activity__drop"],
[class*="sort-zone"],
[class*="drop-zone"] {
  border-color: rgba(13, 235, 216, 0.35) !important;
}

/* ── 21. Flip card / sorting card brand border → cyan ──
   Rise only sets border-top via .brand--border;
   we make it a full subtle border instead */
.playing-card__content.brand--border {
  border-top-color: #0debd8 !important;
  border-top-width: 2px !important;
}

/* ── 22. Quiz choice items — base + hover ──
   Rise injects white (#f7f7f8) on hover via its own stylesheet;
   override with a dark purple tint to stay on-brand */
.quiz-multiple-choice-option {
  background-color: transparent !important;
  border-color: #2a2d3e !important;
}

.quiz-multiple-choice-option:hover {
  background-color: rgba(120, 54, 207, 0.1) !important;
  border-color: rgba(120, 54, 207, 0.35) !important;
}

/* ── 23. Quiz feedback circle (big icon below the choices) ──
   Rise sets this border to solid black (#000) by default.
   Generic rule = purple; incorrect variant overrides to red. */
.quiz-card__feedback-icon {
  border-color: #7836cf !important;
}

.quiz-card__feedback-icon--incorrect {
  border-color: rgba(220, 75, 75, 0.85) !important;
}

/* ── 24. Quiz choice indicator SVGs ──
   Rise renders these with fill="currentColor"; we set both
   fill and color to override correctly for each state. */

/* Wrong answer X icon → muted red */
svg[data-testid="incorrect-x-active"] {
  fill: rgba(220, 75, 75, 0.9) !important;
  color: rgba(220, 75, 75, 0.9) !important;
}

/* Correct answer ✓ icon → cyan */
svg[data-testid="correct-check-active"] {
  fill: #0debd8 !important;
  color: #0debd8 !important;
}

/* ── 25. Scenario blocks ──
   Rise sets scenario text/bubble/response backgrounds to white (#fff).
   Override all three to the dark card colour so text stays readable. */
.scenario-block__text__inner,
.scenario-block__dialogue__bubble,
.scenario-block__dialogue__pane,
.scenario-block__dialogue--response,
.scenario-block__response__inner {
  background-color: #1a1d2e !important;
  color: #cbd5e1 !important;
}

.scenario-block__text__inner *,
.scenario-block__dialogue__bubble *,
.scenario-block__dialogue__pane *,
.scenario-block__dialogue--response *,
.scenario-block__response__inner * {
  color: #cbd5e1 !important;
}

.scenario-block__text__inner h1,
.scenario-block__text__inner h2,
.scenario-block__text__inner h3,
.scenario-block__dialogue__bubble h1,
.scenario-block__dialogue__bubble h2,
.scenario-block__dialogue__bubble h3 {
  color: #f1f5f9 !important;
}

/* Response option number badges → purple (they default to black) */
.scenario-block__response__number {
  background-color: #7836cf !important;
  color: #f1f5f9 !important;
}

/* ── 26. Feedback area & "Try again" button text ──
   Ensure all text inside the feedback wrap stays light,
   including the retry/try-again button Rise injects */
.quiz-card__feedback-wrap *,
.block-knowledge__retake,
.block-knowledge__retake * {
  color: #f1f5f9 !important;
}

/* ── 27. Callout (note) block — cyan border + icon ── */
.block-statement__note-card {
  border: 1px solid rgba(13, 235, 216, 0.7) !important;
}
.block-statement__note-icon,
.block-statement__note-icon svg {
  color: #0debd8 !important;
  fill: currentColor !important;
}

/* ── 28. Sort activity drop zones — visible purple dashed border ── */
.pile__wrap {
  border: 1.5px dashed rgba(120, 54, 207, 0.9) !important;
  background-color: rgba(120, 54, 207, 0.07) !important;
  border-radius: 6px !important;
}

/* ── 29. Continue hint (locked state) — purple bg, white text ── */
.continue-hint {
  background-color: #7836cf !important;
  color: #f1f5f9 !important;
}
.continue-hint * {
  color: #f1f5f9 !important;
}

/* ── 30. Scenario dialogue button — purple bg, white text ── */
.scenario-block__dialogue__button {
  background-color: #7836cf !important;
  border-color: #7836cf !important;
  color: #f1f5f9 !important;
}

/* ── 31. Scenario dialogue scroll fade + scrollbar ──
   Rise injects a white-to-transparent gradient when text overflows.
   Override to match the dark background. Style the scrollbar to match. */
.scenario-block__dialogue__bubble.show-fade::before,
.scenario-block__dialogue__pane.show-fade::before {
  background: linear-gradient(to top, #1a1d2e, transparent) !important;
}

.scenario-block__dialogue__bubble,
.scenario-block__dialogue__pane,
.scenario-block__dialogue__bubble__content,
.scenario-block__dialogue__pane__content {
  scrollbar-width: thin !important;
  scrollbar-color: #7836cf #1a1d2e !important;
}

.scenario-block__dialogue__bubble::-webkit-scrollbar,
.scenario-block__dialogue__pane::-webkit-scrollbar,
.scenario-block__dialogue__bubble__content::-webkit-scrollbar,
.scenario-block__dialogue__pane__content::-webkit-scrollbar {
  width: 6px;
}

.scenario-block__dialogue__bubble::-webkit-scrollbar-track,
.scenario-block__dialogue__pane::-webkit-scrollbar-track,
.scenario-block__dialogue__bubble__content::-webkit-scrollbar-track,
.scenario-block__dialogue__pane__content::-webkit-scrollbar-track {
  background: #1a1d2e !important;
}

.scenario-block__dialogue__bubble::-webkit-scrollbar-thumb,
.scenario-block__dialogue__pane::-webkit-scrollbar-thumb,
.scenario-block__dialogue__bubble__content::-webkit-scrollbar-thumb,
.scenario-block__dialogue__pane__content::-webkit-scrollbar-thumb {
  background-color: #7836cf !important;
  border-radius: 3px;
}

/* ── 32. Flashcard border + flip button ──
   Default border is #ddd (barely visible on dark bg).
   Flip button is near-white; override both to match the dark theme. */
.flashcard-side,
.flashcard-side.block-card--white,
.block-flashcards.bg--type-light .flashcard-side {
  border: 1px solid rgba(120, 54, 207, 0.5) !important;
}

.flashcard-side-flip__btn--not-hovered {
  background-color: rgba(120, 54, 207, 0.4) !important;
}

.flashcard-side-flip__btn {
  background-color: #7836cf !important;
  color: #f1f5f9 !important;
}

.flashcard-side-flip__btn svg {
  color: #f1f5f9 !important;
  fill: currentColor !important;
}

/* ── 33. Knowledge check "requires correct answer" disclaimer ── */
.block-knowledge .quiz-card__require-correct-answer-disclaimer {
  background-color: #1a1d2e !important;
  color: #cbd5e1 !important;
  border-color: #2a2d3e !important;
}
.block-knowledge .quiz-card__require-correct-answer-disclaimer * {
  color: #cbd5e1 !important;
}

/* ── 34. Loading curtain — pin text to black on white bg ──
   Broad colour rules bleed onto the white loading screen.
   Override explicitly so the curtain reads correctly. */
.curtain__title,
.curtain__description,
.curtain__text,
.curtain * {
  color: #000 !important;
}

/* ── 35. Continue / navigation buttons — white text ──
   Rise's broad body color (#cbd5e1) bleeds onto button labels.
   Target all Rise button variants so text is white on purple. */
.arc-btn,
.arc-btn--primary,
.arc-btn--secondary,
.arc-btn *,
.lesson-nav__btn,
.lesson-nav__btn *,
.continue-hint__btn,
.continue-hint__btn *,
.scenario-block__dialogue__button,
.scenario-block__dialogue__button * {
  color: #fff !important;
}