/* Video lessons use the same surfaces and controls as the resident course. */
body.page-eeg_videos { --text-primary: var(--text-color); --success-green: #236340; --success-green-light: #edf7f1; --error-ink: #a12c31; --error-surface: #fff1f0; background: var(--bg-color); color: var(--text-color); }
body.dark.page-eeg_videos { --success-green: #a0d9b4; --success-green-light: #193329; --error-ink: #f3a5a8; --error-surface: #352024; }
.page-eeg_videos .hero-section { max-width: 900px; margin: 0 auto 1.25rem; padding: 1.5rem 1rem 0; text-align: center; }
.page-eeg_videos .hero-section .page-title { color: var(--text-color); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 650; letter-spacing: -.035em; margin: 0 0 .65rem; }
.video-intro { max-width: 70ch; margin: 0 auto; color: var(--text-secondary); font-size: .98rem; line-height: 1.65; }
.video-wrapper .video-source-credit { margin: .75rem 0 0; padding: .75rem .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-color); font-size: .88rem; line-height: 1.6; text-align: left; }
.video-source-credit a { color: var(--accent-color); text-underline-offset: 3px; }
.video-practice-followup { max-width: 70ch; margin: 0 auto 2rem; padding: 0 1.5rem; color: var(--text-secondary); font-size: .92rem; line-height: 1.65; text-align: center; }
.video-practice-followup a { color: var(--accent-color); text-underline-offset: 3px; }
#eeg-videos-container { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); align-items: start; gap: 1.25rem; width: 100%; max-width: 1320px; padding: 0 1.5rem; margin: 0 auto 1.5rem; }
.video-list { position: sticky; top: 84px; max-height: calc(100dvh - 110px); overflow-y: auto; padding: 1rem; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.video-list-title { color: var(--text-secondary); font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .25rem .8rem; margin: 0 0 .35rem; }
.video-list ul { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.video-list li { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: .55rem .65rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; font-size: .87rem; line-height: 1.45; cursor: pointer; }
.video-list li:hover { color: var(--text-color); background: var(--surface-2); border-color: var(--border-color); }
.video-list li.active { color: var(--action-ink); background: var(--action-bg); border-color: var(--action-bg); font-weight: 600; }
.video-list li i { width: 1rem; flex: 0 0 1rem; text-align: center; }
.page-eeg_videos .main-content { min-width: 0; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.video-section, .quiz-section { padding: 1.25rem; }
.video-wrapper { width: 100%; min-width: 0; }
.video-wrapper, .quiz-section { scroll-margin-top: 85px; }
.video-wrapper h3 { margin: 0 0 .85rem; color: var(--text-color); font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.4; }
#videoPlayer { display: block; width: 100%; max-height: min(55dvh, 520px); aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: var(--radius-sm); }
.video-playback-status, .video-practice-note { color: var(--text-secondary); font-size: .85rem; line-height: 1.55; margin: .6rem 0; }
.video-playback-status:empty { display: none; }
.video-nav, .quiz-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; margin-top: 1rem; }
.video-nav button, .quiz-nav button, #feedbackMessage .btn, .back-to-videos-btn { display: inline-flex; justify-content: center; align-items: center; gap: .45rem; min-height: var(--control-height); padding: .65rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-color); font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
.video-nav .btn-next, .quiz-nav .btn-next { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-bg); }
.video-nav button:hover:not(:disabled), .quiz-nav button:hover:not(:disabled), #feedbackMessage .btn:hover { background: var(--surface-3); border-color: var(--accent-color); }
.video-nav .btn-next:hover:not(:disabled), .quiz-nav .btn-next:hover:not(:disabled) { background: var(--action-hover); }
.video-nav button:disabled, .quiz-nav button:disabled { opacity: .45; cursor: default; }
#progressDisplay { display: none; margin-top: .85rem; padding: .8rem 1rem; background: var(--surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }
#progressDisplay.has-progress { display: block; }
.quiz-section { display: none; }
.quiz-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; border-bottom: 1px solid var(--border-color); padding-bottom: .8rem; margin-bottom: 1rem; }
.quiz-header h3 { margin: 0; color: var(--text-color); font-size: 1.2rem; font-weight: 650; letter-spacing: -.02em; }
.progress-indicator { color: var(--text-secondary); font-size: .85rem; font-variant-numeric: tabular-nums; }
.quiz-question p { margin: 0 0 1rem; color: var(--text-color); font-size: 1.05rem; font-weight: 550; line-height: 1.65; }
.quiz-question ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.quiz-question button { width: 100%; min-height: var(--control-height); padding: .8rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-color); text-align: left; font: inherit; font-size: .97rem; line-height: 1.55; cursor: pointer; }
.quiz-question button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent-color); }
.quiz-question button:disabled { cursor: default; }
#feedbackMessage { display: none; padding: .85rem 1rem; margin: 1rem 0; border: 1px solid; border-radius: var(--radius-sm); font-size: .96rem; line-height: 1.65; }
#feedbackMessage:not(:empty) { display: block; }
#feedbackMessage.correct-msg { color: var(--success-green); background: var(--success-green-light); border-color: var(--success-green); }
#feedbackMessage.incorrect-msg { color: var(--error-ink); background: var(--error-surface); border-color: var(--error-ink); }
.quiz-results { color: var(--text-color); }
.quiz-results h3 { font-size: 1.25rem; font-weight: 650; }
.quiz-results p { font-size: .96rem; line-height: 1.65; }
.quiz-results .success { color: var(--success-green); }
.quiz-results .error { color: var(--error-ink); }
.quiz-results .warning { color: var(--text-secondary); }
.mobile-video-dropdown-container, .back-to-videos-btn, .mobile-only-title { display: none; }
.page-eeg_videos :is(button, select, [role="button"]):focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
@media (min-width: 769px) and (max-height: 900px) {
  .page-eeg_videos .hero-section { padding-top: 1rem; margin-bottom: 1rem; }
  .page-eeg_videos .hero-section .page-title { font-size: 2rem; margin-bottom: .4rem; }
  #videoPlayer { max-height: calc(100dvh - 350px); min-height: 180px; }
  .video-section, .quiz-section { padding: 1rem; }
  .video-practice-note, .video-playback-status { margin: .45rem 0; }
}
@media (max-width: 900px) and (min-width: 769px) {
  #eeg-videos-container { grid-template-columns: 205px minmax(0, 1fr); gap: 1rem; padding: 0 1rem; }
  .video-list { padding: .7rem; }
}
@media (max-width: 768px) {
  #eeg-videos-container { grid-template-columns: minmax(0, 1fr); padding: 0 1rem; gap: 1rem; }
  .video-list { display: none; }
  .mobile-video-dropdown-container { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
  .mobile-video-dropdown-container.hidden { display: none; }
  .dropdown-label { color: var(--text-secondary); font-size: .87rem; font-weight: 600; }
  .mobile-video-dropdown { width: 100%; min-height: var(--control-height); padding: .7rem .8rem; color: var(--text-color); background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font: inherit; font-size: 16px; }
  .page-eeg_videos .main-content { display: none; }
  .page-eeg_videos .main-content.video-selected { display: block; }
  .back-to-videos-btn { display: inline-flex; margin: .85rem .85rem 0; }
  .video-section, .quiz-section { padding: 1rem; }
  .video-nav, .quiz-nav { gap: .4rem; }
  .video-nav button, .quiz-nav button { flex: 1; min-width: 80px; padding: .6rem; font-size: .82rem; }
  .video-nav button i { display: none; }
  .video-practice-followup { padding: 0 1rem; }
}
/* Selected answers retain their blue cue in both color themes. */
.page-eeg_videos { --quiz-selected-surface: #eaf2fc; }
.page-eeg_videos.dark { --quiz-selected-surface: #243d58; }