/* Final light-surface pass for imported lesson widgets. This file is loaded
   after each generated lesson stylesheet so a future content rebuild keeps
   the reading room light without changing the lesson interactions. */
.legacy-content :where(.hero-banner, .hero-dark, .bd-here, .bd-next) {
  background: linear-gradient(135deg, #e9f0e6 0%, #fffefa 100%) !important;
  color: var(--ink) !important;
}

/* These build-course panels used to be dark cards with white copy. Their
   backgrounds are now intentionally pale, so restore readable foregrounds
   and separators for the nested states as well. */
.legacy-content .bd-here .bd-here-cap b,
.legacy-content .bd-here .bd-node.cur .bd-node-label,
.legacy-content .bd-next .bd-next-txt h4 {
  color: var(--ink) !important;
}

.legacy-content .bd-here .bd-track-line {
  background: var(--line) !important;
}

.legacy-content .bd-here .bd-node-dot {
  background: color-mix(in srgb, var(--surface) 86%, var(--teal)) !important;
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line)) !important;
  color: var(--muted) !important;
}

.legacy-content .bd-here .bd-node.cur .bd-node-dot {
  background: var(--surface) !important;
  border-color: var(--teal) !important;
  color: var(--ink) !important;
}

.legacy-content :where(
  pre,
  .code,
  .codebox,
  .code-block,
  .code-box,
  .code-panel,
  .code-view,
  .fmt-code,
  .fmt-output,
  .raw-stream,
  .sk-code,
  .json-ref,
  .prompt-box,
  .hash-prompt,
  .ic-prompt-block,
  .vdb-code,
  .t5-code,
  .t6-code,
  .t7-code,
  .t8-code,
  .t9-code,
  .t11-code,
  .r-code,
  .x8-prompt,
  .x9-code,
  .pg-css,
  .ent-token,
  .msg.log,
  .msg.prd pre,
  .why-box,
  .oss-cmd,
  .oss-milestone,
  .projection,
  .source,
  .source-head,
  .visual,
  .tree,
  .cell,
  .cell.head,
  .state,
  .exercise,
  .takeaway,
  .decision,
  .mess-blob
) {
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
}

.legacy-content :where(
  pre,
  .code,
  .codebox,
  .code-block,
  .code-box,
  .code-panel,
  .code-view,
  .fmt-code,
  .fmt-output,
  .raw-stream,
  .sk-code,
  .json-ref,
  .prompt-box,
  .hash-prompt,
  .ic-prompt-block,
  .vdb-code,
  .t5-code,
  .t6-code,
  .t7-code,
  .t8-code,
  .t9-code,
  .t11-code,
  .r-code,
  .x8-prompt,
  .x9-code,
  .pg-css,
  .ent-token,
  .msg.log,
  .msg.prd pre,
  .why-box,
  .oss-cmd,
  .oss-milestone,
  .projection,
  .source,
  .source-head,
  .visual,
  .tree,
  .cell,
  .cell.head,
  .state,
  .exercise,
  .takeaway,
  .decision,
  .mess-blob
) :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, li, code) {
  color: var(--ink) !important;
}

.legacy-content :where(.pic-cell, .t9s-stage, .t1-qr) {
  background: var(--surface-soft) !important;
}

.legacy-content :where(.pic-cell .pic-tag, .t9s-count, .t1-count) {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
  color: var(--accent-dark) !important;
}

.legacy-content :where(.mock-btn, .sample-btn:hover, .t5-btn.undo, .x8-addbtn.undo) {
  background: var(--accent) !important;
  color: #fff !important;
}

.legacy-content :where(.x3-toast, .rb-toast, .as-toast, .as-log, .p16-down .toast) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.legacy-content :where(.popup-overlay, .confirm-popup) {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
  color: var(--ink) !important;
}