/* Tutor 4.0.8 learning-area templates. Load after Tutor and circuit-tutor.css.
   Native sidebar positioning, fullscreen, tab visibility and progress values stay native. */
body.bc-site ::highlight(bc-lesson-spoken) { background-color: #f34bdd; color: #080c11; text-shadow: none; }
body.bc-site .tutor-lesson-wrapper ::selection { background-color: #f34bdd; color: #080c11; text-shadow: none; }
.bc-lesson-narration {
  max-inline-size: 68ch;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid #355361;
  border-radius: .6rem;
  background: linear-gradient(120deg, #38e6f50b, #f34bdd0a), #101b24;
  color: #e7f4fa;
}
.bc-lesson-narration-intro { display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: baseline; }
.bc-lesson-narration-intro strong { color: #f1f6fa; }
.bc-lesson-narration-intro span, .bc-lesson-narration-status { color: #b9cfda; font-size: .9rem; }
.bc-lesson-narration-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: .85rem .4rem; }
.bc-lesson-narration-controls button,
.bc-lesson-narration-controls select { min-height: 2.5rem; border: 1px solid #567583; border-radius: .35rem; padding: .4rem .75rem; background: #162934; color: #f1f6fa; font: inherit; cursor: pointer; }
.bc-lesson-narration-controls button:first-child { border-color: #38e6f5; color: #9ff5ff; }
.bc-lesson-narration-controls button:hover:not(:disabled),
.bc-lesson-narration-controls select:hover { border-color: #9ff5ff; background: #21404b; }
.bc-lesson-narration-controls button:disabled { opacity: .5; cursor: not-allowed; }
.bc-lesson-narration-controls label { display: inline-flex; align-items: center; gap: .5rem; color: #c6d4df; }
.bc-lesson-narration-controls .bc-lesson-narration-voice { flex: 1 1 18rem; min-inline-size: 0; max-inline-size: 27rem; }
.bc-lesson-narration-voice select { inline-size: 100%; min-inline-size: 0; }
.bc-site .tutor-learning-area .tutor-lesson-wrapper .bc-section-heading { display: inline-block; margin-inline-end: .45rem; }
.bc-site .tutor-learning-area .tutor-lesson-wrapper .bc-section-play { display: inline-flex; align-items: center; margin: 0 0 .65em; padding: .25rem .6rem; border: 1px solid #567583; border-radius: .4rem; background: #162934; color: #9ff5ff; font: inherit; font-size: .82rem; line-height: 1.3; cursor: pointer; vertical-align: baseline; }
.bc-site .tutor-learning-area .tutor-lesson-wrapper .bc-section-play:hover { border-color: #9ff5ff; background: #21404b; }
.bc-site .tutor-learning-area .tutor-lesson-wrapper .bc-section-play:focus-visible { outline: 3px solid #ff66ed; outline-offset: 2px; }
.bc-lesson-narration-status { margin: 0; }
.bc-recorded-status { color: #b9cfda; font-size: .9rem; margin: .2rem 0 .7rem; }
.bc-recorded-narration { border-block: 1px solid #355361; margin-block: .8rem; }
.bc-browser-fallback summary { color: #9ff5ff; cursor: pointer; padding: .5rem 0; }
.bc-translation-notice { border-left: 3px solid #38e6f5; padding: .45rem .75rem; color: #b9cfda; }
.bc-lesson-visual { margin: 1.3rem 0 1.6rem; max-inline-size: 100%; padding: .65rem; border: 1px solid #355361; border-radius: .6rem; background: #101b24; }
.bc-lesson-visual a { display: block; overflow: auto; border-radius: .35rem; }
.bc-lesson-visual img { display: block; inline-size: 100%; block-size: auto; min-inline-size: 0; }
.bc-lesson-visual a:focus-visible { outline: 2px solid #38e6f5; outline-offset: 3px; }
.bc-lesson-visual figcaption { padding: .65rem .3rem .15rem; color: #c6d4df; font-size: .92rem; }
body.bc-owner-draft-lesson .tutor-learning-area-footer[data-lesson] { display: none; }
.bc-owner-lesson-review { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--bc-border, #304b58); }
.bc-owner-lesson-review span { color: var(--bc-cyan, #38e6f5); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bc-owner-lesson-review a { color: var(--bc-text, #f1f6fa); text-decoration: underline; text-underline-offset: .2em; }
.bc-owner-lesson-review a:hover, .bc-owner-lesson-review a:focus-visible { color: var(--bc-cyan, #38e6f5); }
body.bc-site :is(.tutor-learning-page, .tutor-learning-area) {
  --tutor-surface-base: var(--bc-bg, #080c11);
  --tutor-surface-l1: var(--bc-panel, #0d151d);
  --tutor-surface-l1-hover: #172631;
  --tutor-surface-l2: #1a2b36;
  --tutor-surface-l2-hover: #243c48;
  --tutor-surface-l3: #12222c;
  --tutor-surface-sidebar-l1: #0b1219;
  --tutor-text-primary: #f1f6fa;
  --tutor-text-primary-inverse: #07151a;
  --tutor-text-secondary: #c6d4df;
  --tutor-text-subdued: #a5b6c7;
  --tutor-text-disabled: #91a3b4;
  --tutor-text-brand: var(--bc-cyan, #38e6f5);
  --tutor-text-brand-hover: #a5f7ff;
  --tutor-icon-idle: #d7e5ee;
  --tutor-icon-idle-inverse: #07151a;
  --tutor-icon-secondary: #a5b6c7;
  --tutor-icon-subdued: #91a3b4;
  --tutor-icon-hover: #f1f6fa;
  --tutor-icon-brand: var(--bc-cyan, #38e6f5);
  --tutor-icon-brand-hover: #a5f7ff;
  --tutor-border-idle: #304b58;
  --tutor-border-idle2: #456775;
  --tutor-border-hover: #7a9eac;
  --tutor-button-primary: var(--bc-cyan, #38e6f5);
  --tutor-button-primary-hover: #95f5ff;
  --tutor-button-primary-focused: #95f5ff;
  --tutor-button-primary-disabled: #27434d;
  --tutor-button-primary-soft: #13343f;
  --tutor-button-primary-soft-hover: #1c4957;
  --tutor-button-primary-soft-focused: #1c4957;
  --tutor-button-secondary: #203744;
  --tutor-button-secondary-hover: #2f4b5a;
  --tutor-button-ghost-hover: #1a303d;
  --tutor-button-outline-hover: #19313e;
  --tutor-button-outline-focused-inverse: #19313e;
  --tutor-button-disabled: #1c2b36;
  --tutor-actions-brand-primary: var(--bc-cyan, #38e6f5);
  --tutor-actions-brand-secondary: #b3f8ff;
  --tutor-actions-success-primary: #81e6bb;
  --tutor-actions-success-secondary: #ceffe8;
  --tutor-actions-gray-quaternary: #29424e;
  --tutor-tab-l3-active: #123743;
  --tutor-tab-l3-active-hover: #193c48;
  --tutor-tab-sidebar-l4-hover: #172b37;
  --tutor-tab-sidebar-l4-active: #193c48;
  --tutor-tab-active-shadow: inset 0 -2px var(--bc-cyan, #38e6f5);
  --tutor-brand-450: var(--bc-magenta, #f34bdd);
  --tutor-popover-border: #456775;
  --tutor-popover-shadow: 0 12px 32px #0008;
  --tutor-modal-shadow: 0 20px 60px #0009;
  color: var(--tutor-text-primary);
  background-color: var(--tutor-surface-base);
  color-scheme: dark;
}

/* Trace edges stay quiet around the article and the native curriculum panels. */
body.bc-site .tutor-learning-area .tutor-learning-header {
  box-shadow: 0 1px #38e6f52b;
}

body.bc-site .tutor-learning-area :is(.tutor-learning-header-inner, .tutor-learning-sidebar-curriculum, .tutor-learning-sidebar-pages, .tutor-lesson-content-tab) {
  box-shadow: inset 0 1px #38e6f52e;
}

body.bc-site .tutor-learning-area .tutor-lesson-content-tab {
  background-image: radial-gradient(ellipse at 100% 0, #f34bdd07, transparent 26rem);
  border-color: #355361;
}

body.bc-site .tutor-learning-area .tutor-learning-progress {
  border-bottom: 1px solid #29424e;
  background-image: linear-gradient(120deg, #38e6f509, transparent 75%);
}

body.bc-site .tutor-learning-area .tutor-learning-progress .tutor-progress-bar-fill {
  background-image: linear-gradient(90deg, #21bacf, var(--bc-cyan, #38e6f5));
}

body.bc-site .tutor-learning-area .tutor-learning-progress-text span {
  color: var(--bc-cyan, #38e6f5);
  font-variant-numeric: tabular-nums;
}

body.bc-site .tutor-learning-area .tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active {
  box-shadow: inset 0 0 0 1px #38e6f56b;
}

body.bc-site .tutor-learning-area .tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active::before {
  background-color: var(--bc-magenta, #f34bdd);
  box-shadow: 0 0 8px #f34bdd38;
}

/* Tutor's deeply nested focus resets need one scoped, explicit override. */
body.bc-site :is(.tutor-learning-page, .tutor-learning-area) :is(a, button, input, select, textarea, [role="button"], [role="tab"]):focus-visible {
  outline: 3px solid var(--bc-magenta, #f34bdd) !important;
  outline-offset: 3px;
}

body.bc-site .tutor-learning-area :is(.tutor-learning-nav-item, .tutor-learning-nav-header, .tutor-learning-pages-item, .tutor-tabs-tab):focus-visible {
  outline-offset: -3px;
}

body.bc-site :is(.tutor-learning-page, .tutor-learning-area) .tutor-btn-primary:not(:disabled):not(.disabled) {
  color: #07151a;
}

body.bc-site :is(.tutor-learning-page, .tutor-learning-area) .tutor-btn-primary:not(:disabled):not(.disabled) svg:not([class]) {
  color: currentColor;
}

body.bc-site .tutor-learning-area .tutor-lesson-content .tutor-mark-as-complete-button:not(.completed):not(:disabled):not(.disabled) {
  --tutor-icon-brand: #07151a;
  --tutor-icon-brand-hover: #07151a;
  color: #07151a;
  background: linear-gradient(120deg, #73f0fa, #38d4e6);
  box-shadow: inset 0 0 0 1px #b4faff55;
}

body.bc-site .tutor-learning-area .tutor-lesson-content .tutor-mark-as-complete-button:not(.completed):not(:disabled):not(.disabled):hover {
  color: #07151a;
  background: #a5f7ff;
}

body.bc-site .tutor-learning-area .tutor-learning-area-footer[data-lesson] {
  box-shadow: 0 -1px #38e6f52b;
}

/* Comfortable reading width; the native lesson/video/tab layout is unchanged. */
body.bc-site .tutor-learning-area .tutor-lesson-wrapper {
  max-inline-size: 68ch;
  margin-inline: auto;
  color: #c6d4df;
  font-size: clamp(1rem, .96rem + .15vw, 1.08rem);
  line-height: 1.75;
  overflow-wrap: break-word;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(h1, h2, h3, h4, h5, h6) {
  color: #f1f6fa;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
  margin-block: 1.8em .65em;
  text-wrap: balance;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper h1 {
  font-size: clamp(1.9rem, 3vw, 2.55rem);
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper h2 {
  font-size: clamp(1.55rem, 2.5vw, 1.95rem);
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper > :first-child {
  margin-block-start: 0;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(p, ul, ol, blockquote, pre, figure, table) {
  margin-block-end: 1.35em;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(ul, ol) {
  padding-inline-start: 1.5em;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper li + li {
  margin-block-start: .55em;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(strong, th) {
  color: #f1f6fa;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper a:not(.tutor-btn) {
  color: var(--bc-cyan, #38e6f5);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper a:not(.tutor-btn):hover {
  color: #a5f7ff;
  text-decoration-thickness: 2px;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--bc-magenta, #f34bdd);
  background: #17212e;
  color: #d2deea;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(code, kbd) {
  color: #b7f8ff;
  font-size: .9em;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper pre {
  max-inline-size: 100%;
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid #355361;
  border-radius: 6px;
  background: #08121b;
  line-height: 1.6;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper .wp-block-table {
  overflow-x: auto;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(th, td) {
  border-color: #355361;
  padding: .65em .8em;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper :is(img, video) {
  max-inline-size: 100%;
  block-size: auto;
}

body.bc-site .tutor-learning-area .tutor-lesson-wrapper figcaption {
  margin-block-start: .65rem;
  color: #a5b6c7;
  font-size: .875rem;
  line-height: 1.6;
}

@media (max-width: 576px) {
  body.bc-site .tutor-learning-area .tutor-lesson-wrapper {
    font-size: 1rem;
    line-height: 1.7;
  }

  body.bc-site .tutor-learning-area .tutor-lesson-wrapper blockquote {
    padding: .8rem 1rem;
  }

  body.bc-site .tutor-learning-area .tutor-learning-area-footer[data-lesson] a.tutor-btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bc-site .tutor-learning-area :is(.tutor-learning-nav-item, .tutor-learning-nav-header, .tutor-learning-pages-item, .tutor-mark-as-complete-button, .tutor-progress-bar-fill) {
    transition-duration: 0s;
    animation-duration: 0s;
  }
}