/*
  Lesson Studio accessible colour contract.
  Every semantic background below has a matching foreground token.
  Components should use these pairs instead of inventing independent text colours.
*/

:root {
  --ls-page-bg: #F8FAFC;
  --ls-page-fg: #0F172A;
  --ls-surface-bg: #FFFFFF;
  --ls-surface-fg: #0F172A;
  --ls-muted-fg: #334155;
  --ls-subtle-fg: #475569;
  --ls-input-bg: #FFFFFF;
  --ls-input-fg: #0F172A;
  --ls-action-bg: #0F766E;
  --ls-action-fg: #FFFFFF;
  --ls-action-hover-bg: #0D504A;
  --ls-secondary-bg: #F8FAFC;
  --ls-secondary-fg: #0F172A;
  --ls-dark-bg: #0D1117;
  --ls-dark-panel-bg: #141B24;
  --ls-dark-fg: #FFFFFF;
  --ls-dark-muted-fg: #E2E8F0;
  --ls-gold-bg: #F8D24B;
  --ls-gold-fg: #1A1200;
  --ls-gold-on-dark: #F8D24B;
  --ls-info-bg: #1D4ED8;
  --ls-info-fg: #FFFFFF;
  --ls-info-pale-bg: #DBEAFE;
  --ls-info-pale-fg: #0F172A;
  --ls-success-bg: #15803D;
  --ls-success-fg: #FFFFFF;
  --ls-success-pale-bg: #DCFCE7;
  --ls-success-pale-fg: #0F172A;
  --ls-warning-pale-bg: #FEF3C7;
  --ls-warning-pale-fg: #0F172A;
  --ls-danger-bg: #DC2626;
  --ls-danger-fg: #FFFFFF;
  --ls-danger-pale-bg: #FEE2E2;
  --ls-danger-pale-fg: #7F1D1D;
  --ls-teal-pale-bg: #CCFBF1;
  --ls-teal-pale-fg: #0F172A;
  --ls-selected-bg: #FDE68A;
  --ls-selected-fg: #0F172A;
  --ls-disabled-bg: #E5E7EB;
  --ls-disabled-fg: #334155;

  --primary-text: var(--ls-page-fg) !important;
  --secondary-text: var(--ls-muted-fg) !important;
  --muted-text: var(--ls-subtle-fg) !important;
  --disabled-text: var(--ls-disabled-fg) !important;
  --page-bg: var(--ls-page-bg) !important;
  --surface: var(--ls-surface-bg) !important;
  --white: var(--ls-surface-bg) !important;
  --dark-navy: var(--ls-dark-bg) !important;
  --charcoal: var(--ls-dark-panel-bg) !important;
  --accessible-gold: var(--ls-gold-bg) !important;
  --dark-gold: #7C4A00 !important;
  --teal-action: var(--ls-action-bg) !important;
  --blue-info: var(--ls-info-bg) !important;
  --success-green: var(--ls-success-bg) !important;
  --error-red: var(--ls-danger-bg) !important;
  --ink: var(--ls-page-fg) !important;
  --body: var(--ls-muted-fg) !important;
  --muted: var(--ls-subtle-fg) !important;
  --ph: var(--ls-subtle-fg) !important;
  --on-dark: var(--ls-dark-fg) !important;
  --header-text: var(--ls-dark-fg) !important;
}

html,
body {
  background: var(--ls-page-bg) !important;
  color: var(--ls-page-fg) !important;
  text-shadow: none !important;
}

body * {
  text-shadow: none !important;
}

::placeholder {
  color: var(--ls-subtle-fg) !important;
  opacity: 1 !important;
}

.ui-on-light,
.ui-on-light * {
  color: var(--ls-surface-fg) !important;
}

.ui-on-dark,
.ui-on-dark *,
.ui-on-accent,
.ui-on-accent *,
.ui-action,
.ui-action *,
.ui-state-active,
.ui-state-active *,
.ui-toast,
.ui-toast * {
  color: var(--ls-action-fg) !important;
}

.ui-action,
.ui-state-active {
  background: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
}

.ui-action:hover {
  background: var(--ls-action-hover-bg) !important;
}

/* .sd-header (student detail page) was removed from the dark-background group
   below — it was dark navy when this rule was written, matched the reference
   at the time, and this same catch-all silently fought the redesign the way
   .sd-tab.active fights the underline-tab reclaim further down this file:
   .sd-header is now a light header (docs/design-reference/Student overview
   .png), so forcing it dark + white text was actively wrong, not neutral. */
.login-left,
.sidebar,
.student-header,
.vb-sidebar,
#screenLoading,
.auth-header,
.legal-page-header,
.cookie-notice,
.fc-modal-head,
.fc-card,
.generating-overlay,
.gen-card,
#generatingOverlay {
  background-color: var(--ls-dark-bg);
  color: var(--ls-dark-fg) !important;
}

.login-left *,
.sidebar *,
.student-header *,
.vb-sidebar *,
#screenLoading *,
.auth-header *,
.legal-page-header *,
.cookie-notice *,
.fc-modal-head *,
.fc-card *,
.generating-overlay *,
.gen-card *,
#generatingOverlay * {
  color: inherit;
}

/* .lesson-success-panel (the "Lesson created" toast) was removed from the
   dark-background group above for the same reason .sd-header was — it used
   to be a dark card, the reference (docs/design-reference/generation
   suvvess toast.png) is a white card with dark text, and this catch-all
   would otherwise force every child back to white-on-white. */

/* The blanket "inherit white" above is right for sidebar labels, but it also
   flattens the sidebar's intentionally-muted secondary text (icons, chevrons,
   stat captions) to pure white, silently undoing the softer-grey rule these
   classes carry in index.html. #94A3B8 on the sidebar's #0D1117 background is
   comfortably above the muted-on-dark contrast floor, and dark enough to read
   as clearly distinct from white at a glance (the earlier #CBD5E1 was too
   close to white to tell apart on sight, even though it was technically a
   different colour) — so restore it here. */
.sidebar .nav-item:not(.active) .nav-icon,
.sidebar .teacher-pill-chevron,
.sidebar .hours-stat-label,
.sidebar .hours-sub,
.sidebar .hours-link,
.sidebar .nav-section-label,
.sidebar .hours-title {
  color: #94A3B8 !important;
}

.nav-item,
.teacher-pill,
.vb-nav-item,
.sh-student,
.sh-signout {
  color: var(--ls-dark-fg) !important;
}

.hours-saved.active,
.hours-saved.active *,
.vb-nav-item.active,
.vb-nav-item.active *,
.login-brand-name,
.vb-sb-name {
  color: var(--ls-gold-on-dark) !important;
}

.nav-item.active,
.nav-item.active *,
.sb-name {
  color: #FFFFFF !important;
}

.modal,
.modal-body,
.settings-card,
.dash-card,
.lesson-row,
.student-card,
.flow-card,
.source-material-card,
.source-panel,
.lib-card,
.video-lib-row,
.vb-bank-row,
.vb-req-row,
.share-link-modal {
  background-color: var(--ls-surface-bg) !important;
  color: var(--ls-surface-fg) !important;
}

.dash-card-title,
.lesson-row-title,
.student-name,
.flow-card-title,
.create-form-title,
.field-label,
.modal-label,
.settings-label,
.form-label,
.vb-ai-preview-title {
  color: var(--ls-surface-fg) !important;
}

.dash-card-sub,
.lesson-row-meta,
.student-goal,
.flow-card-sub,
.create-form-sub,
.recent-empty,
.section-title,
.modal-body p,
.settings-card .account-value {
  color: var(--ls-subtle-fg) !important;
}

input,
select,
textarea,
option,
.field-input,
.field-select,
.modal-input,
.modal-select,
.search-input,
.lib-search,
.sched-date-input {
  background-color: var(--ls-input-bg) !important;
  color: var(--ls-input-fg) !important;
}

button,
[role="button"] {
  text-shadow: none !important;
}

.login-submit,
.auth-btn-primary,
.tb-btn.primary,
.btn-primary,
.generate-btn,
.topic-card-btn,
.btn-add,
.btn-study,
.modal-btn.save,
.btn-approve,
.vb-ai-gen-btn,
.vb-ai-save-btn,
.vb-ai-toggle,
.skip-link,
.nav-badge,
.sched-apply-btn,
.sd-save-btn:not([style*="transparent"]),
.sca-btn-primary,
.lib-btn.primary,
.source-tab.active,
.ss-cat-pill.active,
.ss-dur-pill.active,
.as-chip.active,
.flows-tab.active,
.lib-filter-pill.active {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: var(--ls-action-fg) !important;
}

.login-submit *,
.auth-btn-primary *,
.tb-btn.primary *,
.btn-primary *,
.generate-btn *,
.topic-card-btn *,
.btn-add *,
.btn-study *,
.modal-btn.save *,
.btn-approve *,
.vb-ai-gen-btn *,
.vb-ai-save-btn *,
.vb-ai-toggle *,
.skip-link *,
.nav-badge *,
.sched-apply-btn *,
.sd-save-btn:not([style*="transparent"]) *,
.sca-btn-primary *,
.lib-btn.primary *,
.source-tab.active *,
.ss-cat-pill.active *,
.ss-dur-pill.active *,
.as-chip.active *,
.flows-tab.active *,
.lib-filter-pill.active * {
  color: var(--ls-action-fg) !important;
}

.btn-secondary,
.modal-btn.cancel,
.tb-btn.outline,
.row-btn,
.ss-action-btn,
.ss-lib-btn,
.lib-btn,
.sca-btn:not(.sca-btn-primary),
.source-tab,
.sd-save-btn[style*="transparent"],
.sched-clear-btn,
.search-clear-btn {
  background-color: var(--ls-secondary-bg) !important;
  color: var(--ls-secondary-fg) !important;
}

.btn-danger,
.btn-delete-account,
.profile-dropdown-logout:hover {
  background-color: var(--ls-danger-bg) !important;
  color: var(--ls-danger-fg) !important;
}

.settings-field-danger,
.login-error {
  background-color: var(--ls-danger-pale-bg) !important;
  color: var(--ls-danger-pale-fg) !important;
}

.profile-btn,
.teacher-avatar,
.level-badge,
.s-badge,
.student-avatar {
  background-color: var(--ls-gold-bg) !important;
  color: var(--ls-gold-fg) !important;
}

.s-badge.level,
.level-badge {
  background-color: var(--ls-warning-pale-bg) !important;
  color: var(--ls-warning-pale-fg) !important;
}

.student-avatar.av-1 { background-color: #1D4ED8 !important; color: #FFFFFF !important; }
.student-avatar.av-2 { background-color: #047857 !important; color: #FFFFFF !important; }
.student-avatar.av-3 { background-color: #B91C1C !important; color: #FFFFFF !important; }
.student-avatar.av-4 { background-color: #6D28D9 !important; color: #FFFFFF !important; }
.student-avatar.av-5 { background-color: #92400E !important; color: #FFFFFF !important; }
.student-avatar.av-6 { background-color: #0369A1 !important; color: #FFFFFF !important; }
.student-avatar.av-7 { background-color: #BE123C !important; color: #FFFFFF !important; }
.student-avatar.av-8 { background-color: #4338CA !important; color: #FFFFFF !important; }

.s-badge.course,
.student-dropdown-item[style*="var(--accessible-gold)"],
.enroll-combobox-item[style*="var(--accessible-gold)"] {
  background-color: var(--ls-selected-bg) !important;
  color: var(--ls-selected-fg) !important;
}

.ss-result-badge,
.fli-doc-link,
.vb-ai-preview,
.student-next,
.student-flow-strip,
.qs-autofill-note {
  background-color: var(--ls-teal-pale-bg) !important;
  color: var(--ls-teal-pale-fg) !important;
}

.btn-primary:hover,
.generate-btn:hover,
.topic-card-btn:hover,
.modal-btn.save:hover,
.sd-save-btn:not([style*="transparent"]):hover {
  background-color: var(--ls-action-hover-bg) !important;
  color: var(--ls-action-fg) !important;
}

/* Shared button interaction contract.
   This file loads last, so these rules define the final app-wide behaviour. */
button,
[role="button"],
a[class*="btn"],
a[class*="button"] {
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

.login-submit,
.auth-btn-primary,
.dashboard-coach-cta,
.tb-btn.primary,
.btn-primary,
.generate-btn,
.topic-card-btn,
.btn-add,
.add-student-btn,
.btn-study,
.modal-btn.save,
.btn-approve,
.vb-ai-gen-btn,
.vb-ai-save-btn,
.vb-ai-toggle,
.vocab-page-primary,
.sd-new-btn,
.flow-primary-action,
.flow-card-footer .ui-on-accent,
.video-hero-btn.primary,
.lib-hero-btn.primary,
.sched-apply-btn,
.sd-save-btn:not([style*="transparent"]),
.sca-btn-primary,
.lib-btn.primary,
.admin-action-btn.primary,
.settings-button.primary,
.btn-start-practice,
.btn-new-game,
.btn-settings-save,
.btn-link-teacher,
.btn-view-brief,
.btn-open-summary {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
}

.login-submit:hover:not(:disabled),
.auth-btn-primary:hover:not(:disabled),
.dashboard-coach-cta:hover:not(:disabled),
.tb-btn.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.generate-btn:hover:not(:disabled),
.topic-card-btn:hover:not(:disabled),
.btn-add:hover:not(:disabled),
.add-student-btn:hover:not(:disabled),
.btn-study:hover:not(:disabled),
.modal-btn.save:hover:not(:disabled),
.btn-approve:hover:not(:disabled),
.vb-ai-gen-btn:hover:not(:disabled),
.vb-ai-save-btn:hover:not(:disabled),
.vb-ai-toggle:hover:not(:disabled),
.vocab-page-primary:hover:not(:disabled),
.sd-new-btn:hover:not(:disabled),
.flow-primary-action:hover:not(:disabled),
.flow-card-footer .ui-on-accent:hover:not(:disabled),
.video-hero-btn.primary:hover:not(:disabled),
.lib-hero-btn.primary:hover:not(:disabled),
.sched-apply-btn:hover:not(:disabled),
.sd-save-btn:not([style*="transparent"]):hover:not(:disabled),
.sca-btn-primary:hover:not(:disabled),
.lib-btn.primary:hover:not(:disabled),
.admin-action-btn.primary:hover:not(:disabled),
.settings-button.primary:hover:not(:disabled),
.btn-start-practice:hover:not(:disabled),
.btn-new-game:hover:not(:disabled),
.btn-settings-save:hover:not(:disabled),
.btn-link-teacher:hover:not(:disabled),
.btn-view-brief:hover:not(:disabled),
.btn-open-summary:hover:not(:disabled) {
  background-color: var(--ls-action-hover-bg) !important;
  border-color: var(--ls-action-hover-bg) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px var(--border) !important;
}

.flow-card-footer .ui-on-accent,
.flow-card-footer button:not(.flow-primary-action):not(.ui-on-accent) {
  border-style: solid !important;
  border-width: 1px !important;
}

.btn-secondary,
.modal-btn.cancel,
.tb-btn.outline,
.row-btn,
.ss-action-btn,
.ss-lib-btn,
.lib-btn:not(.primary),
.sca-btn:not(.sca-btn-primary),
.source-tab:not(.active),
.prepared-source-actions button,
.sd-save-btn[style*="transparent"],
.sched-clear-btn,
.sched-create-btn,
.sched-pdf-btn,
.sched-actions-toggle,
.sched-google-btn,
.admin-action-btn:not(.primary),
.admin-page .btn-secondary,
.settings-button:not(.primary):not(.danger),
.vocab-page-secondary,
.sd-back,
.sd-vocab-btn,
.gen-keep-working,
.flow-secondary-action,
.flow-card-footer button:not(.flow-primary-action):not(.ui-on-accent),
.video-hero-btn:not(.primary),
.lib-hero-btn:not(.primary),
.btn-request,
.btn-dismiss,
.btn-add-word,
.vb-add-word-btn,
.vb-copy-btn,
.sa-link-btn,
.enrol-btn,
.legal-menu-btn,
.dashboard-secondary,
.dashboard-coach-close,
.btn-pss-link,
.btn-pss-remove {
  background-color: #FFFFFF !important;
  border-color: #000000 !important;
  border-width: 1.5px !important;
  border-radius: 8px !important;
  color: #000000 !important;
}

.btn-secondary:hover:not(:disabled),
.modal-btn.cancel:hover:not(:disabled),
.tb-btn.outline:hover:not(:disabled),
.row-btn:hover:not(:disabled),
.ss-action-btn:hover:not(:disabled),
.ss-lib-btn:hover:not(:disabled),
.lib-btn:not(.primary):hover:not(:disabled),
.sca-btn:not(.sca-btn-primary):hover:not(:disabled),
.source-tab:not(.active):hover:not(:disabled),
.prepared-source-actions button:hover:not(:disabled),
.sd-save-btn[style*="transparent"]:hover:not(:disabled),
.sched-clear-btn:hover:not(:disabled),
.sched-create-btn:hover:not(:disabled),
.sched-pdf-btn:hover:not(:disabled),
.sched-actions-toggle:hover:not(:disabled),
.sched-google-btn:hover:not(:disabled),
.admin-action-btn:not(.primary):hover:not(:disabled),
.admin-page .btn-secondary:hover:not(:disabled),
.settings-button:not(.primary):not(.danger):hover:not(:disabled),
.vocab-page-secondary:hover:not(:disabled),
.sd-back:hover:not(:disabled),
.sd-vocab-btn:hover:not(:disabled),
.gen-keep-working:hover:not(:disabled),
.flow-secondary-action:hover:not(:disabled),
.flow-card-footer button:not(.flow-primary-action):not(.ui-on-accent):hover:not(:disabled),
.video-hero-btn:not(.primary):hover:not(:disabled),
.lib-hero-btn:not(.primary):hover:not(:disabled),
.btn-request:hover:not(:disabled),
.fc-btn:hover:not(:disabled),
.btn-dismiss:hover:not(:disabled),
.btn-add-word:hover:not(:disabled),
.vb-add-word-btn:hover:not(:disabled),
.vb-copy-btn:hover:not(:disabled),
.sa-link-btn:hover:not(:disabled),
.enrol-btn:hover:not(:disabled),
.legal-menu-btn:hover:not(:disabled),
.dashboard-secondary:hover:not(:disabled),
.dashboard-coach-close:hover:not(:disabled),
.btn-pss-link:hover:not(:disabled),
.btn-pss-remove:hover:not(:disabled) {
  background-color: #E6F3F1 !important;
  border-color: var(--ls-action-bg) !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px var(--border) !important;
}

/* Open/Teach are a teal outline/solid pair, not the generic black-outline
   secondary button above — these two rules must stay after that generic
   .row-btn block (equal specificity, both !important: later wins). */
.row-btn-teach {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
}

.row-btn-teach:hover:not(:disabled) {
  background-color: var(--ls-action-hover-bg) !important;
  border-color: var(--ls-action-hover-bg) !important;
  color: #FFFFFF !important;
}

.row-btn-teacher {
  background-color: #FFFFFF !important;
  border-color: var(--ls-action-bg) !important;
  color: var(--ls-action-bg) !important;
}

.row-btn-teacher:hover:not(:disabled) {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
}

/* Vocabulary Banks "Assign to student" is a solid-teal primary action next to
   the generic outline "Copy to My Banks" (.vb-copy-btn above) — needs its own
   carve-out for the same reason .row-btn-teach does. */
.vb-copy-btn.primary {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
}

.vb-copy-btn.primary:hover:not(:disabled) {
  background-color: var(--ls-action-hover-bg) !important;
  border-color: var(--ls-action-hover-bg) !important;
  color: #FFFFFF !important;
}

.btn-danger,
.btn-delete-account,
.btn-delete,
.row-btn.delete,
.row-btn-teacher[data-lesson-action="archive"],
.settings-button.danger,
.settings-button.soft-danger,
.profile-dropdown-logout,
.sched-menu-item-danger,
.btn-unlink-teacher,
.btn-del-word {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--ls-danger-bg) !important;
  border-color: var(--ls-danger-bg) !important;
  border-radius: 8px !important;
  color: #000000 !important;
}

.btn-danger:hover:not(:disabled),
.btn-delete-account:hover:not(:disabled),
.btn-delete:hover:not(:disabled),
.row-btn.delete:hover:not(:disabled),
.row-btn-teacher[data-lesson-action="archive"]:hover:not(:disabled),
.settings-button.danger:hover:not(:disabled),
.settings-button.soft-danger:hover:not(:disabled),
.profile-dropdown-logout:hover:not(:disabled),
.sched-menu-item-danger:hover:not(:disabled),
.btn-unlink-teacher:hover:not(:disabled),
.btn-del-word:hover:not(:disabled) {
  background-color: var(--ls-danger-bg) !important;
  border-color: var(--ls-danger-bg) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px #FECACA !important;
}

.nav-item:hover,
.vb-nav-item:hover,
.hours-saved:hover,
.teacher-pill:hover {
  background-color: #1F2937 !important;
  color: #FFFFFF !important;
  transform: none !important;
  box-shadow: none !important;
}

.vb-nav-item.active,
.hours-saved.active,
.teacher-pill.active {
  background-color: #1F1B12 !important;
  border-color: #B7791F !important;
  box-shadow: 0 0 0 1px #B7791F !important;
}

.nav-item.active {
  background-color: #0F766E !important;
  border-color: #0F766E !important;
  box-shadow: none !important;
}

.view-btn,
.lib-view-btn,
.flows-tab,
.source-tab,
.as-chip,
.ss-cat-pill,
.ss-dur-pill,
.lib-filter-pill,
.sh-help-btn,
.tab-btn,
.sd-tab {
  color: #000000 !important;
}

.view-btn:hover:not(.active),
.lib-view-btn:hover:not(.active),
.flows-tab:hover:not(.active),
.source-tab:hover:not(.active),
.as-chip:hover:not(.active),
.ss-cat-pill:hover:not(.active),
.ss-dur-pill:hover:not(.active),
.lib-filter-pill:hover:not(.active),
.sh-help-btn:hover:not(.active),
.tab-btn:hover:not(.active),
.sd-tab:hover:not(.active) {
  background-color: #E6F3F1 !important;
  border-color: var(--ls-action-bg) !important;
  color: #000000 !important;
}

.flows-tab.active,
.source-tab.active,
.as-chip.active,
.ss-cat-pill.active,
.ss-dur-pill.active,
.lib-filter-pill.active,
.sh-help-btn.active,
.tab-btn.active,
[aria-selected="true"] {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
}

.flows-tab.active *,
.source-tab.active *,
.as-chip.active *,
.ss-cat-pill.active *,
.ss-dur-pill.active *,
.lib-filter-pill.active *,
.sh-help-btn.active *,
.tab-btn.active *,
[aria-selected="true"] * {
  color: #FFFFFF !important;
}

/* Courses' .course-tab is an underline tab (docs/design-reference/courses.png)
   — selection shows as coloured text + a coloured underline, not a filled
   background. It has role="tab"/aria-selected like any other tab, so the
   generic [aria-selected="true"] contrast rule above would otherwise force
   it into the filled-pill look. Reclaim it here rather than remove the
   generic rule, which other real filled-pill tabs still depend on.
   Grid/List view toggle (.view-btn/.course-view-btn/.lib-view-btn) is the
   same story: an outline-square control, not a filled pill, so it was
   removed from the filled-pill list above rather than reclaimed here — it
   never carries aria-selected. */
.course-tab.active {
  background-color: transparent !important;
  border-bottom-color: var(--ls-action-bg) !important;
  color: var(--ls-action-bg) !important;
}

/* Student detail page's .sd-tab is the same underline-tab shape as
   .course-tab above (docs/design-reference/Student overview .png) — reclaimed
   the same way, for the same reason. Removed from the filled-pill list
   rather than left there, since .sd-tab.active was explicitly named in it. */
.sd-tab.active {
  background-color: transparent !important;
  border-bottom-color: var(--ls-action-bg) !important;
  color: var(--ls-action-bg) !important;
}
.sd-tab.active * {
  color: var(--ls-action-bg) !important;
}

/* Ready Discussions (.lib-tab), Resource Library (.resource-tab),
   Vocabulary Banks (.vb-tab) and Admin (.admin-tab) tabs are the same
   underline shape as .course-tab/.sd-tab above — reclaimed the same way.
   .resource-tab, .vb-tab and .admin-tab carry role="tab"/aria-selected so
   the generic rule above would otherwise force them filled; .lib-tab
   doesn't but is reclaimed too for consistency with the others. */
.lib-tab.active,
.resource-tab.active,
.vb-tab.active,
.admin-tab.active {
  background-color: transparent !important;
  border-bottom-color: var(--ls-action-bg) !important;
  color: var(--ls-action-bg) !important;
}
.lib-tab.active *,
.resource-tab.active *,
.vb-tab.active *,
.admin-tab.active * {
  color: var(--ls-action-bg) !important;
}

.lesson-list-more-btn,
.footer-link,
.forgot-link,
.auth-toggle-btn {
  background-color: transparent !important;
  color: #000000 !important;
  box-shadow: none !important;
}

.lesson-list-more-btn:hover,
.footer-link:hover,
.forgot-link:hover,
.auth-toggle-btn:hover {
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transform: none !important;
  box-shadow: none !important;
}

.section-link {
  background-color: transparent !important;
  color: #0F766E !important;
  box-shadow: none !important;
}

.section-link:hover {
  color: #0D504A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transform: none !important;
  box-shadow: none !important;
}

.quiet-link {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

.quiet-link:hover {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transform: none !important;
  box-shadow: none !important;
}

.intro-actions .quiet-link {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.intro-actions .quiet-link:hover {
  background-color: var(--ls-action-hover-bg) !important;
  border-color: var(--ls-action-hover-bg) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px var(--border) !important;
}

.dashboard-primary,
.video-hero-btn.primary,
.lib-hero-btn.primary {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  border-radius: 8px !important;
  color: #000000 !important;
}

.dashboard-primary:hover:not(:disabled),
.video-hero-btn.primary:hover:not(:disabled),
.lib-hero-btn.primary:hover:not(:disabled) {
  background-color: #FFFFFF !important;
  border-color: var(--ls-action-bg) !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px var(--ls-action-bg) !important;
}

/* Dark-hero secondary: transparent ghost button, matches the home hero. */
.dashboard-secondary,
.video-hero-btn:not(.primary),
.lib-hero-btn:not(.primary) {
  background-color: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
}

.dashboard-secondary:hover:not(:disabled),
.video-hero-btn:not(.primary):hover:not(:disabled),
.lib-hero-btn:not(.primary):hover:not(:disabled) {
  background-color: #000000 !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Lesson-created toast. The card itself is now light teal (#E6F3F1, set in
   index.html) rather than the white card in docs/design-reference/generation
   suvvess toast.png — the owner asked for that twice, because a white card
   over the white Create page was indistinguishable from it. The reference
   screenshot is out of date; see docs/DECISIONS.md.

   THIS FILE IS WHY THE FIRST ATTEMPT DID NOT SHOW UP. Every rule below is
   !important, so editing these colours in index.html alone changes nothing
   on screen. Change them here as well, or not at all.

   The secondary buttons were #E6F3F1 — the same colour the card now is, which
   would have made them vanish into it. They are white on the teal card, which
   keeps the same teal outline/solid convention as .row-btn-teach. */
.lesson-success-btn.primary {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
}
.lesson-success-btn.primary:hover:not(:disabled) {
  background-color: var(--ls-action-hover-bg) !important;
  border-color: var(--ls-action-hover-bg) !important;
  color: #FFFFFF !important;
}
.lesson-success-btn:not(.primary) {
  background-color: #FFFFFF !important;
  border-color: var(--ls-action-bg) !important;
  color: var(--ls-action-bg) !important;
}
.lesson-success-close {
  background-color: #FFFFFF !important;
  border-color: var(--border) !important;
  color: #000000 !important;
}
.lesson-success-btn:not(.primary):hover:not(:disabled) {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: #FFFFFF !important;
}
.lesson-success-close:hover:not(:disabled) {
  /* Deeper than the card's #E6F3F1, or the hover state would be invisible
     against it. */
  background-color: #CCE5E1 !important;
  border-color: var(--ls-action-bg) !important;
  color: #000000 !important;
}

/* Schedule hero actions: match the teal primary/secondary pair used on Home's
   lesson rows (.row-btn-teach / .row-btn-teacher), not the dashboard's
   white/black dark-hero treatment above. */
.sched-hero-actions .sched-apply-btn {
  background-color: #0F766E !important;
  border-color: #0F766E !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
}

.sched-hero-actions .sched-apply-btn:hover:not(:disabled) {
  background-color: #0D504A !important;
  border-color: #0D504A !important;
  color: #FFFFFF !important;
}

.sched-hero-actions .sched-create-btn {
  background-color: #FFFFFF !important;
  border: 1.5px solid #0F766E !important;
  border-radius: 8px !important;
  color: #0F766E !important;
}

.sched-hero-actions .sched-create-btn:hover:not(:disabled) {
  background-color: #0F766E !important;
  border-color: #0F766E !important;
  color: #FFFFFF !important;
}

.lesson-fav-btn,
.lib-fav-btn {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

.lesson-fav-btn:hover,
.lib-fav-btn:hover,
.lib-fav-btn.active {
  background-color: #FFFFFF !important;
  border-color: #F8D24B !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px var(--border) !important;
}

button:active:not(:disabled),
[role="button"]:active:not(:disabled),
a[class*="btn"]:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible,
a[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 3px solid var(--ls-action-bg, #2563EB) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
[role="tab"],
[role="radio"],
[role="checkbox"],
[role="menuitem"],
summary {
  min-height: 24px;
}

.auth-legal-links a,
.auth-legal-links button,
.page-footer a,
.privacy-note a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.auth-legal-links button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.modal-overlay {
  align-items: center;
  background: rgba(10, 15, 25, 0.7);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 2000;
}

.modal-overlay.show {
  display: flex;
}

.turnstile-wrap :focus,
.turnstile-wrap :focus-visible {
  outline: 3px solid var(--ls-action-bg, #2563EB) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .loading-dot,
  .deck-pulse,
  .gen-spinner,
  .ap-success-pulse {
    animation: none !important;
  }
}

.vb-ai-card {
  background-color: var(--ls-dark-panel-bg) !important;
  color: var(--ls-dark-fg) !important;
}

.vb-ai-card *,
.vb-ai-card input,
.vb-ai-card textarea,
.vb-ai-card select,
.vb-ai-card input::placeholder,
.vb-ai-card textarea::placeholder {
  color: var(--ls-dark-fg) !important;
}

/* AI preview panel inside the dark card — restore dark text on the light panel */
.vb-ai-card .vb-ai-preview,
.vb-ai-card .vb-ai-preview *,
.vb-ai-card .vb-ai-preview th,
.vb-ai-card .vb-ai-preview td {
  color: var(--ls-surface-fg) !important;
}

/* Vocab bank list rows — force readable text regardless of cascade */
#vbBankList .vb-bank-title,
#vbBankList .vb-bank-meta,
#vbBankList .vb-bank-meta span {
  color: var(--ls-surface-fg) !important;
}

#vbBankList .s-badge.level {
  background-color: var(--ls-warning-pale-bg) !important;
  color: var(--ls-warning-pale-fg) !important;
}

.share-link-modal,
.share-link-modal .modal-body,
.share-link-modal-body,
.share-link-modal-body p,
.share-link-modal-body input {
  background-color: var(--ls-surface-bg) !important;
  color: var(--ls-surface-fg) !important;
}

[disabled],
[aria-disabled="true"],
:disabled {
  background-color: var(--ls-disabled-bg);
  color: var(--ls-disabled-fg) !important;
  opacity: 1 !important;
}

[style*="background:#000"],
[style*="background: #000"],
[style*="background:#0d1117"],
[style*="background: #0d1117"],
[style*="background:#0D1117"],
[style*="background: #0D1117"],
[style*="background:#0f172a"],
[style*="background: #0f172a"],
[style*="background:#0F172A"],
[style*="background: #0F172A"],
[style*="background:#111827"],
[style*="background: #111827"],
[style*="background:#1f2937"],
[style*="background: #1f2937"],
[style*="background:#1F2937"],
[style*="background: #1F2937"] {
  color: var(--ls-dark-fg) !important;
}

[style*="background:#000"] *,
[style*="background: #000"] *,
[style*="background:#0d1117"] *,
[style*="background: #0d1117"] *,
[style*="background:#0D1117"] *,
[style*="background: #0D1117"] *,
[style*="background:#0f172a"] *,
[style*="background: #0f172a"] *,
[style*="background:#0F172A"] *,
[style*="background: #0F172A"] *,
[style*="background:#111827"] *,
[style*="background: #111827"] *,
[style*="background:#1f2937"] *,
[style*="background: #1f2937"] *,
[style*="background:#1F2937"] *,
[style*="background: #1F2937"] * {
  color: var(--ls-dark-fg) !important;
}

.video-prompt-primary,
.video-prompt-primary * {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}