/* =========================================================
   7. Lesson workspace

   The Lesson remains the focused, functional page in the system.
   Its meaningful learning areas stay panel-based, while a restrained
   upper-page wash connects it visually to the more open Home and Map.
   ========================================================= */

/* Scope the environmental wash to actual Lesson pages only. Course Home,
   Course Map and Course Resources define their own canvases. */
.cpa-lesson-shell:not(.cpa-course-home-shell):not(.cpa-course-map-shell):not(.cpa-course-resources-shell) .cpa-lesson-main > .fl-col-content {
  background:
    radial-gradient(
      110% 280px at 50% 0,
      rgba(var(--cpa-course-color-rgb), 0.13) 0,
      rgba(var(--cpa-course-color-rgb), 0.055) 46%,
      rgba(var(--cpa-course-color-rgb), 0) 78%
    ),
    var(--cpa-bg-page) !important;
}

.cpa-lesson,
.cpa-lesson * {
  box-sizing: border-box;
}

.cpa-lesson {
  width: 100%;
  max-width: var(--cpa-lesson-max-width);
  margin: 0 auto !important;
  color: var(--cpa-ink);
  font-family: var(--cpa-font-body);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: max-width var(--cpa-layout-speed) var(--cpa-layout-ease);
}

.cpa-lesson-shell.is-course-nav-collapsed .cpa-lesson {
  max-width: var(--cpa-lesson-max-width-collapsed);
}

.cpa-lesson__hero-card,
.cpa-soundslice-modal {
  --cpa-lesson-chrome-bg: var(--cpa-dark-chrome-bg);
  --cpa-lesson-chrome-surface: var(--cpa-dark-chrome-surface);
  --cpa-lesson-chrome-details: var(--cpa-dark-chrome-details);
  --cpa-lesson-chrome-line: var(--cpa-dark-chrome-line);
  --cpa-lesson-chrome-line-strong: var(--cpa-dark-chrome-line-strong);
  --cpa-lesson-chrome-text: var(--cpa-dark-chrome-text);
  --cpa-lesson-chrome-muted: var(--cpa-dark-chrome-muted);
  --cpa-lesson-chrome-bg-stack:
    linear-gradient(
      145deg,
      rgba(var(--cpa-secondary-rgb), 0.12),
      rgba(237, 100, 59, 0.035) 46%,
      rgba(255, 255, 255, 0) 78%
    ),
    var(--cpa-lesson-chrome-bg);
  --cpa-lesson-chrome-bg-stack-hover:
    linear-gradient(180deg, var(--cpa-lesson-chrome-surface), rgba(255, 255, 255, 0) 86%),
    linear-gradient(
      145deg,
      rgba(var(--cpa-secondary-rgb), 0.14),
      rgba(237, 100, 59, 0.04) 46%,
      rgba(255, 255, 255, 0) 78%
    ),
    var(--cpa-lesson-chrome-bg);
  --cpa-lesson-chrome-details-bg:
    linear-gradient(180deg, var(--cpa-lesson-chrome-details), rgba(255, 255, 255, 0.048)),
    var(--cpa-lesson-chrome-bg);
  --cpa-lesson-chrome-strip-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    var(--cpa-lesson-chrome-bg);
  --cpa-lesson-control-bg: var(--cpa-dark-chrome-control-bg);
  --cpa-lesson-control-border: var(--cpa-dark-chrome-control-border);
  --cpa-lesson-control-color: var(--cpa-dark-chrome-control-color);
  --cpa-lesson-control-muted: var(--cpa-dark-chrome-control-muted);
  --cpa-lesson-control-shadow: var(--cpa-dark-chrome-control-shadow);
  --cpa-lesson-control-hover-bg: var(--cpa-dark-chrome-control-hover-bg);
  --cpa-lesson-control-hover-border: var(--cpa-lesson-chrome-line-strong);
  --cpa-lesson-control-hover-color: var(--cpa-dark-chrome-control-hover-color);
  --cpa-lesson-control-hover-shadow: var(--cpa-dark-chrome-control-hover-shadow);
  --cpa-lesson-control-focus-ring: var(--cpa-focus-blue);
  --cpa-lesson-control-selected-bg: var(--cpa-dark-chrome-control-selected-bg);
  --cpa-lesson-control-selected-border: var(--cpa-dark-chrome-control-selected-border);
  --cpa-lesson-control-selected-color: var(--cpa-dark-chrome-control-selected-color);
  --cpa-lesson-control-selected-hover-bg: var(--cpa-dark-chrome-control-selected-hover-bg);
  --cpa-lesson-control-selected-hover-border: var(--cpa-dark-chrome-control-selected-hover-border);
  --cpa-lesson-control-primary-bg: var(--cpa-accent-readable);
  --cpa-lesson-control-primary-border: var(--cpa-accent-readable);
  --cpa-lesson-control-primary-hover-bg: var(--cpa-accent);
  --cpa-lesson-control-primary-hover-border: var(--cpa-accent);
  --cpa-lesson-control-primary-shadow: 0 8px 18px rgba(237, 100, 59, 0.24);
  --cpa-lesson-control-primary-hover-shadow: 0 10px 22px rgba(237, 100, 59, 0.30);
  --cpa-lesson-control-primary-focus-ring: rgba(237, 100, 59, 0.18);
  --cpa-lesson-control-saved-bg: rgba(237, 100, 59, 0.13);
  --cpa-lesson-control-saved-border: rgba(237, 100, 59, 0.42);
  --cpa-lesson-control-saved-color: var(--cpa-accent);
  --cpa-lesson-control-saved-hover-bg: rgba(237, 100, 59, 0.18);
  --cpa-lesson-control-saved-hover-border: var(--cpa-accent);
  --cpa-lesson-control-saved-focus-ring: rgba(237, 100, 59, 0.18);
}

.cpa-lesson__hero-card {
  --cpa-lesson-hero-x: 20px;
  position: relative;
  isolation: isolate;
  width: 100%;
  border: 1px solid var(--cpa-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cpa-bg-card);
  box-shadow: 0 14px 34px rgba(16, 38, 43, 0.16);
}

.cpa-lesson__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--cpa-bg-card);
}

.cpa-lesson__video-frame iframe,
.cpa-lesson__video-frame video,
.cpa-lesson__video-frame embed,
.cpa-lesson__video-frame object {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}

.cpa-lesson__video-frame > * {
  max-width: 100% !important;
}

.cpa-lesson__empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(237, 100, 59, 0.13), transparent 42%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 12px
    ),
    #1E1B18;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--cpa-font-ui);
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.cpa-lesson__hero-titlebar {
  width: 100%;
  min-height: 66px;
  padding: 16px var(--cpa-lesson-hero-x);
  border: 0 !important;
  border-top: 1px solid var(--cpa-lesson-chrome-line) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--cpa-lesson-chrome-bg-stack) !important;
  color: var(--cpa-lesson-chrome-text) !important;
  font-family: var(--cpa-font-ui);
  text-align: left;
  text-transform: none !important;
  box-shadow: none !important;
}

.cpa-lesson__hero-titlebar--toggle {
  cursor: pointer;
  transition:
    background var(--cpa-motion-fast) ease,
    color var(--cpa-motion-fast) ease;
}

.cpa-lesson__hero-titlebar--toggle:hover {
  background: var(--cpa-lesson-chrome-bg-stack-hover) !important;
}

.cpa-lesson__hero-titlebar--toggle[aria-expanded="true"] {
  border-bottom: 1px solid var(--cpa-lesson-chrome-line) !important;
}

.cpa-lesson__hero-titlebar--toggle:focus {
  outline: none !important;
}

.cpa-lesson__hero-titlebar--toggle:focus-visible {
  box-shadow: inset 0 0 0 3px var(--cpa-focus-blue) !important;
}

.cpa-lesson__title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.cpa-lesson__title-wrap::before,
.cpa-lesson__description::before {
  display: block;
  color: var(--cpa-secondary);
  font-family: var(--cpa-font-ui);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cpa-lesson__title-wrap::before {
  content: "Lesson";
  margin-bottom: 3px;
}

.cpa-lesson__title {
  margin: 0;
  display: block;
  color: var(--cpa-lesson-chrome-text);
  font-family: var(--cpa-font-ui);
  font-size: 19px;
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-transform: none !important;
}

.cpa-lesson__details-control {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  color: var(--cpa-lesson-chrome-muted);
  font-family: var(--cpa-font-ui);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cpa-lesson__details-toggle-text,
.cpa-lesson__details-toggle-text--collapsed,
.cpa-lesson__details-toggle-text--expanded {
  display: none !important;
}

.cpa-lesson__details-toggle-circle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--cpa-lesson-control-border);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--cpa-lesson-control-bg);
  color: var(--cpa-lesson-control-muted);
  box-shadow: var(--cpa-lesson-control-shadow);
  transition:
    background var(--cpa-motion-fast) ease,
    border-color var(--cpa-motion-fast) ease,
    color var(--cpa-motion-fast) ease,
    transform var(--cpa-motion-fast) ease,
    box-shadow var(--cpa-motion-fast) ease;
}

.cpa-lesson__hero-titlebar--toggle:hover .cpa-lesson__details-toggle-circle {
  background: var(--cpa-lesson-control-hover-bg);
  border-color: rgba(var(--cpa-course-color-rgb), 0.45);
  color: var(--cpa-lesson-control-hover-color);
  box-shadow: var(--cpa-lesson-control-hover-shadow);
  transform: translateY(-1px);
}

.cpa-lesson__hero-titlebar[aria-expanded="true"] .cpa-lesson__details-toggle-circle,
.cpa-lesson__hero-titlebar.is-open .cpa-lesson__details-toggle-circle {
  background: rgba(var(--cpa-course-color-rgb), 0.16);
  border-color: rgba(var(--cpa-course-color-rgb), 0.45);
  color: var(--cpa-lesson-control-selected-color);
  box-shadow: var(--cpa-lesson-control-shadow);
}

.cpa-lesson__hero-titlebar--toggle[aria-expanded="true"]:hover .cpa-lesson__details-toggle-circle,
.cpa-lesson__hero-titlebar--toggle.is-open:hover .cpa-lesson__details-toggle-circle {
  background: rgba(var(--cpa-course-color-rgb), 0.22);
  border-color: rgba(var(--cpa-course-color-rgb), 0.56);
  color: var(--cpa-lesson-control-selected-color);
  box-shadow: var(--cpa-lesson-control-hover-shadow);
}

.cpa-lesson__details-toggle-icon {
  width: var(--cpa-chevron-size);
  height: var(--cpa-chevron-size);
  border: solid currentColor;
  border-width: 0 var(--cpa-chevron-stroke) var(--cpa-chevron-stroke) 0;
  display: block;
  transform: translateY(var(--cpa-chevron-y-closed)) rotate(var(--cpa-chevron-rotation-closed));
  transition:
    transform var(--cpa-chevron-motion),
    color var(--cpa-motion-fast) ease;
}

.cpa-lesson__hero-titlebar[aria-expanded="true"] .cpa-lesson__details-toggle-icon,
.cpa-lesson__hero-titlebar.is-open .cpa-lesson__details-toggle-icon {
  transform: translateY(var(--cpa-chevron-y-open)) rotate(var(--cpa-chevron-rotation-open));
}

.cpa-lesson__details {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--cpa-lesson-hero-x);
  border-bottom: 0 solid transparent;
  background: var(--cpa-lesson-chrome-details-bg);
  transition:
    max-height 0.32s var(--cpa-layout-ease),
    padding-top 0.26s var(--cpa-layout-ease),
    padding-bottom 0.26s var(--cpa-layout-ease);
}

.cpa-lesson__details.is-open {
  max-height: var(--cpa-details-open-height, 420px);
  padding-top: 15px;
  padding-bottom: 18px;
}

.cpa-lesson__details[hidden] {
  display: none !important;
}

.cpa-lesson__description {
  max-width: 800px;
  padding-top: 0;
  color: var(--cpa-lesson-chrome-muted);
  font-family: var(--cpa-font-body);
  font-size: 14px;
  line-height: 1.64;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--cpa-motion-fast) ease,
    transform 0.24s var(--cpa-layout-ease);
}

.cpa-lesson__details.is-open .cpa-lesson__description {
  opacity: 1;
  transform: translateY(0);
}

.cpa-lesson__description p {
  margin: 0 0 10px;
}

.cpa-lesson__description p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   8. Lesson utility / navigation row
   ========================================================= */

.cpa-lesson__controls {
  padding: 10px 16px !important;
  border-top: 1px solid var(--cpa-lesson-chrome-line);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--cpa-lesson-chrome-strip-bg);
}

.cpa-lesson__controls-left,
.cpa-lesson__controls-center,
.cpa-lesson__controls-right {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.cpa-lesson__controls-left { justify-content: flex-start !important; }
.cpa-lesson__controls-center { justify-content: center !important; }
.cpa-lesson__controls-right { justify-content: flex-end !important; }

/* Shared lesson-button primitive used by previous/next and centre tools. */
.cpa-lesson__nav-button,
.cpa-lesson__nav-button:visited,
.cpa-lesson__tool,
.cpa-lesson__tool:visited {
  --cpa-btn-min-width: auto;
  --cpa-btn-min-height: 42px;
  --cpa-btn-padding-x: 13px;
  --cpa-btn-padding-y: 0;
  --cpa-btn-gap: 9px;
  --cpa-btn-radius: var(--cpa-radius-pill);
  --cpa-btn-border: var(--cpa-lesson-control-border);
  --cpa-btn-bg: var(--cpa-lesson-control-bg);
  --cpa-btn-color: var(--cpa-lesson-control-color);
  --cpa-btn-shadow: var(--cpa-lesson-control-shadow);
  --cpa-btn-hover-bg: var(--cpa-lesson-control-hover-bg);
  --cpa-btn-hover-border: var(--cpa-lesson-control-hover-border);
  --cpa-btn-hover-color: var(--cpa-lesson-control-hover-color);
  --cpa-btn-hover-shadow: var(--cpa-lesson-control-hover-shadow);
  --cpa-btn-focus-border: var(--cpa-lesson-control-hover-border);
  --cpa-btn-focus-ring: var(--cpa-lesson-control-focus-ring);
  --cpa-btn-ease: var(--cpa-layout-ease);

  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  min-width: var(--cpa-btn-min-width) !important;
  min-height: var(--cpa-btn-min-height) !important;
  padding: var(--cpa-btn-padding-y) var(--cpa-btn-padding-x) !important;
  border: 1px solid var(--cpa-btn-border) !important;
  border-radius: var(--cpa-btn-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cpa-btn-gap) !important;
  background: var(--cpa-btn-bg) !important;
  color: var(--cpa-btn-color) !important;
  font-family: var(--cpa-font-ui) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: var(--cpa-btn-shadow) !important;
  cursor: pointer !important;
  transform: translateY(0);
  transition:
    background var(--cpa-motion-fast) var(--cpa-btn-ease),
    border-color var(--cpa-motion-fast) var(--cpa-btn-ease),
    color var(--cpa-motion-fast) var(--cpa-btn-ease),
    transform var(--cpa-motion-fast) var(--cpa-btn-ease),
    box-shadow var(--cpa-motion-fast) var(--cpa-btn-ease) !important;
}

.cpa-lesson__nav-button:hover,
.cpa-lesson__tool:hover {
  background: var(--cpa-btn-hover-bg) !important;
  border-color: var(--cpa-btn-hover-border) !important;
  color: var(--cpa-btn-hover-color) !important;
  box-shadow: var(--cpa-btn-hover-shadow) !important;
  transform: translateY(-1px);
}

.cpa-lesson__nav-button:focus,
.cpa-lesson__tool:focus,
.cpa-lesson__tool--favourite:focus,
.cpa-lesson__favourite-native .cbxwpbkmarktrig:focus {
  outline: none !important;
}

.cpa-lesson__nav-button:focus-visible,
.cpa-lesson__tool:focus-visible {
  border-color: var(--cpa-btn-focus-border) !important;
  box-shadow: 0 0 0 3px var(--cpa-btn-focus-ring) !important;
}

/* Previous / Next lesson navigation */
.cpa-lesson__nav-button--next,
.cpa-lesson__nav-button--next:visited {
  --cpa-btn-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.03)),
    var(--cpa-lesson-control-primary-bg);
  --cpa-btn-color: #FFFFFF;
  --cpa-btn-border: var(--cpa-lesson-control-primary-border);
  --cpa-btn-shadow: var(--cpa-lesson-control-primary-shadow);
  --cpa-btn-hover-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(0, 0, 0, 0.05)),
    var(--cpa-lesson-control-primary-hover-bg);
  --cpa-btn-hover-border: var(--cpa-lesson-control-primary-hover-border);
  --cpa-btn-hover-shadow: var(--cpa-lesson-control-primary-hover-shadow);
  --cpa-btn-focus-border: var(--cpa-lesson-control-primary-hover-border);
  --cpa-btn-focus-ring: var(--cpa-lesson-control-primary-focus-ring);
}

.cpa-lesson__nav-button--prev:hover {
  transform: translateX(-2px);
}

.cpa-lesson__nav-button--next:hover {
  transform: translateX(2px);
}

.cpa-lesson__nav-button::before,
.cpa-lesson__nav-button::after {
  content: none !important;
  display: none !important;
}

.cpa-lesson__nav-icon {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 17px;
  background: transparent;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  transition: color var(--cpa-motion-fast) var(--cpa-layout-ease) !important;
}

.cpa-lesson__nav-icon::before {
  content: none !important;
  display: none !important;
}

.cpa-lesson__nav-icon i,
.cpa-lesson__tool-icon i {
  display: block !important;
  color: currentColor !important;
  line-height: 1 !important;
  font-style: normal !important;
  transform: none !important;
}

.cpa-lesson__nav-icon i {
  font-size: 14px !important;
}

.cpa-lesson__nav-icon--prev i { transform: translateX(-0.5px) !important; }
.cpa-lesson__nav-icon--next i { transform: translateX(0.5px) !important; }

.cpa-lesson__nav-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.cpa-lesson__nav-button--next .cpa-lesson__nav-text {
  align-items: flex-end;
}

.cpa-lesson__nav-label {
  color: currentColor;
  font-family: var(--cpa-font-ui);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 550;
  letter-spacing: -0.02em;
  transition: color var(--cpa-motion-fast) var(--cpa-layout-ease) !important;
}

.cpa-lesson__nav-button--prev .cpa-lesson__nav-label {
  font-weight: 500;
}

.cpa-lesson__nav-button--prev:hover .cpa-lesson__nav-label {
  font-weight: 550;
}

.cpa-lesson__nav-button--next .cpa-lesson__nav-icon,
.cpa-lesson__nav-button--next:hover .cpa-lesson__nav-icon {
  background: transparent !important;
  box-shadow: none !important;
}

/* Middle lesson tools */
.cpa-lesson__tools {
  --cpa-tool-min-width: 112px;
  --cpa-tool-height: 40px;
  --cpa-tool-icon-size: 15px;
  --cpa-tool-icon-slot: 16px;
  --cpa-tool-label-size: 12px;
  --cpa-tool-gap: 10px;
  gap: var(--cpa-tool-gap) !important;
}

.cpa-lesson__tool,
.cpa-lesson__tool:visited {
  --cpa-btn-min-width: var(--cpa-tool-min-width);
  --cpa-btn-min-height: var(--cpa-tool-height);
  --cpa-btn-padding-x: 13px;
  --cpa-btn-padding-y: 6px;
  --cpa-btn-gap: 8px;
}

button.cpa-lesson__tool {
  font-size: inherit !important;
  line-height: inherit !important;
}

.cpa-lesson__tool-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  pointer-events: none;
  transform: none !important;
  transition: color var(--cpa-motion-fast) ease;
}

.cpa-lesson__tool-icon {
  width: var(--cpa-tool-icon-slot) !important;
  height: var(--cpa-tool-icon-slot) !important;
  min-width: var(--cpa-tool-icon-slot) !important;
  min-height: var(--cpa-tool-icon-slot) !important;
  flex: 0 0 var(--cpa-tool-icon-slot) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: color var(--cpa-motion-fast) ease !important;
}

.cpa-lesson__tool-icon i {
  font-size: var(--cpa-tool-icon-size) !important;
}

.cpa-lesson__tool-label {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  color: currentColor !important;
  font-size: var(--cpa-tool-label-size) !important;
  line-height: 1.2 !important;
  font-weight: 550 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpa-lesson__tool--favourite {
  --cpa-btn-color: var(--cpa-lesson-control-muted);
  --cpa-btn-hover-color: var(--cpa-lesson-control-hover-color);
}

.cpa-lesson__tool--favourite .cpa-lesson__tool-label {
  font-weight: 600 !important;
}

.cpa-lesson__tool--favourite:active .cpa-lesson__tool-visual,
.cpa-lesson__tool--favourite:has(.cbxwpbkmarktrig[data-busy="1"]) .cpa-lesson__tool-visual {
  transform: none !important;
}

.cpa-lesson__tool--favourite:has(.cbxwpbkmarktrig-marked) {
  --cpa-btn-bg: var(--cpa-lesson-control-saved-bg);
  --cpa-btn-border: var(--cpa-lesson-control-saved-border);
  --cpa-btn-color: var(--cpa-lesson-control-saved-color);
  --cpa-btn-hover-bg: var(--cpa-lesson-control-saved-hover-bg);
  --cpa-btn-hover-border: var(--cpa-lesson-control-saved-hover-border);
  --cpa-btn-hover-color: var(--cpa-lesson-control-saved-color);
  --cpa-btn-focus-border: var(--cpa-lesson-control-saved-border);
  --cpa-btn-focus-ring: var(--cpa-lesson-control-saved-focus-ring);
}

.cpa-lesson__tool-label--inactive { display: block !important; }
.cpa-lesson__tool-label--active { display: none !important; }

.cpa-lesson__tool--favourite:has(.cbxwpbkmarktrig-marked) .cpa-lesson__tool-label--inactive {
  display: none !important;
}

.cpa-lesson__tool--favourite:has(.cbxwpbkmarktrig-marked) .cpa-lesson__tool-label--active {
  display: block !important;
}

/* Invisible native CBX bookmark layer. The plugin still owns the actual action. */
.cpa-lesson__favourite-native,
.cpa-lesson__favourite-native .cbxwpbkmarkwrap,
.cpa-lesson__favourite-native .cbxwpbkmarktrig {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cpa-lesson__favourite-native,
.cpa-lesson__favourite-native .cbxwpbkmarkwrap {
  z-index: 5 !important;
  display: block !important;
}

.cpa-lesson__favourite-native .cbxwpbkmarktrig {
  border: 0 !important;
  border-radius: var(--cpa-radius-pill) !important;
  display: block !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.cpa-lesson__tool--favourite:focus-within {
  box-shadow: var(--cpa-btn-shadow) !important;
}

.cpa-lesson__tool--favourite:has(.cbxwpbkmarktrig:focus-visible) {
  border-color: var(--cpa-lesson-control-hover-border) !important;
  box-shadow: 0 0 0 3px var(--cpa-lesson-control-focus-ring) !important;
}

.cpa-lesson__tool--favourite:has(.cbxwpbkmarktrig-marked:focus-visible) {
  border-color: var(--cpa-lesson-control-saved-border) !important;
  box-shadow: 0 0 0 3px var(--cpa-lesson-control-saved-focus-ring) !important;
}

.cpa-lesson__favourite-native .cbxwpbkmarktrig:focus,
.cpa-lesson__favourite-native .cbxwpbkmarktrig:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Floating lesson practice tools */
.cpa-lesson-practice-tools,
.cpa-lesson-practice-tools * {
  box-sizing: border-box;
}

.cpa-lesson-practice-tools {
  --cpa-practice-bg:
    linear-gradient(145deg, rgba(var(--cpa-secondary-rgb), 0.16), rgba(237, 100, 59, 0.055) 48%, rgba(255, 255, 255, 0) 80%),
    var(--cpa-dark-chrome-bg);
  --cpa-practice-panel-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    var(--cpa-dark-chrome-bg);
  --cpa-practice-line: var(--cpa-dark-chrome-line);
  --cpa-practice-line-strong: var(--cpa-dark-chrome-line-strong);
  --cpa-practice-text: var(--cpa-dark-chrome-text);
  --cpa-practice-muted: var(--cpa-dark-chrome-muted);
  --cpa-practice-control-bg: var(--cpa-dark-chrome-control-bg);
  --cpa-practice-control-border: var(--cpa-dark-chrome-control-border);
  --cpa-practice-control-color: var(--cpa-dark-chrome-control-color);
  --cpa-practice-focus: var(--cpa-focus-blue);

  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: calc(var(--cpa-global-rail-z, 1000) - 20);
  width: min(324px, calc(100vw - 32px));
  color: var(--cpa-practice-text);
  font-family: var(--cpa-font-ui);
  pointer-events: none;
  transition:
    opacity var(--cpa-motion-fast) var(--cpa-layout-ease),
    transform var(--cpa-motion-fast) var(--cpa-layout-ease);
}

html.cpa-course-drawer-is-open .cpa-lesson-practice-tools,
html.cpa-global-mobile-more-is-open .cpa-lesson-practice-tools,
html.cpa-soundslice-is-open .cpa-lesson-practice-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
}

.cpa-lesson-practice-tools__toggle,
.cpa-lesson-practice-tools__panel {
  pointer-events: auto;
}

.cpa-lesson-practice-tools__toggle {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  min-height: 52px;
  margin: 0 0 0 auto;
  padding: 8px 10px 8px 9px;
  border: 1px solid var(--cpa-practice-line);
  border-radius: var(--cpa-radius-pill);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: var(--cpa-practice-bg);
  color: var(--cpa-practice-text);
  font-family: var(--cpa-font-ui);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(16, 38, 43, 0.18);
  cursor: pointer;
  transform: translateY(0);
  transition:
    background var(--cpa-motion-fast) var(--cpa-layout-ease),
    border-color var(--cpa-motion-fast) var(--cpa-layout-ease),
    box-shadow var(--cpa-motion-fast) var(--cpa-layout-ease),
    transform var(--cpa-motion-fast) var(--cpa-layout-ease);
}

.cpa-lesson-practice-tools__toggle:hover,
.cpa-lesson-practice-tools.is-open .cpa-lesson-practice-tools__toggle {
  border-color: var(--cpa-practice-line-strong);
  box-shadow: 0 18px 38px rgba(16, 38, 43, 0.22);
  transform: translateY(-1px);
}

.cpa-lesson-practice-tools__toggle:focus {
  outline: none;
}

.cpa-lesson-practice-tools__toggle:focus-visible,
.cpa-lesson-practice-tools__close:focus-visible,
.cpa-lesson-practice-tools__stepper button:focus-visible,
.cpa-lesson-practice-tools__play:focus-visible,
.cpa-lesson-practice-tools__tempo-slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cpa-practice-focus);
}

.cpa-lesson-practice-tools__pulse {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(237, 100, 59, 0.34);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(237, 100, 59, 0.12);
  color: var(--cpa-accent);
  transition:
    background var(--cpa-motion-fast) var(--cpa-layout-ease),
    transform var(--cpa-motion-fast) var(--cpa-layout-ease);
}

.cpa-lesson-practice-tools__pulse::before,
.cpa-lesson-practice-tools__pulse::after,
.cpa-lesson-practice-tools__pulse span {
  content: "";
  display: block;
  border-radius: 999px;
  background: currentColor;
}

.cpa-lesson-practice-tools__pulse::before,
.cpa-lesson-practice-tools__pulse::after {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
}

.cpa-lesson-practice-tools__pulse::before {
  left: 11px;
}

.cpa-lesson-practice-tools__pulse::after {
  right: 11px;
}

.cpa-lesson-practice-tools__pulse span {
  width: 3px;
  height: 16px;
  opacity: 0.65;
}

.cpa-lesson-practice-tools.is-running .cpa-lesson-practice-tools__pulse {
  background: rgba(237, 100, 59, 0.2);
}

.cpa-lesson-practice-tools.is-beating .cpa-lesson-practice-tools__pulse {
  transform: scale(1.08);
}

.cpa-lesson-practice-tools__toggle-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cpa-lesson-practice-tools__kicker {
  margin: 0;
  color: var(--cpa-secondary);
  font-family: var(--cpa-font-ui);
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cpa-lesson-practice-tools__toggle-title {
  min-width: 0;
  color: var(--cpa-practice-text);
  font-size: 13px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpa-lesson-practice-tools__toggle-bpm {
  min-width: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--cpa-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
}

.cpa-lesson-practice-tools__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 100%;
  padding: 14px;
  border: 1px solid var(--cpa-practice-line-strong);
  border-radius: 8px;
  background: var(--cpa-practice-panel-bg);
  color: var(--cpa-practice-text);
  box-shadow: 0 22px 56px rgba(16, 38, 43, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  transform-origin: bottom right;
  transition:
    opacity var(--cpa-motion-fast) var(--cpa-layout-ease),
    visibility var(--cpa-motion-fast) var(--cpa-layout-ease),
    transform var(--cpa-motion-fast) var(--cpa-layout-ease);
}

.cpa-lesson-practice-tools__panel[hidden] {
  display: none;
}

.cpa-lesson-practice-tools.is-open .cpa-lesson-practice-tools__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.cpa-lesson-practice-tools__header {
  margin-bottom: 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cpa-lesson-practice-tools__header h2 {
  margin: 3px 0 0;
  color: var(--cpa-practice-text);
  font-family: var(--cpa-font-ui);
  font-size: 18px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}

.cpa-lesson-practice-tools__close {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid var(--cpa-practice-control-border);
  border-radius: var(--cpa-radius-pill);
  display: grid;
  place-items: center;
  background: var(--cpa-practice-control-bg);
  color: var(--cpa-practice-control-color);
  cursor: pointer;
}

.cpa-lesson-practice-tools__close span,
.cpa-lesson-practice-tools__close span::before {
  width: 13px;
  height: 2px;
  border-radius: 999px;
  display: block;
  background: currentColor;
}

.cpa-lesson-practice-tools__close span {
  transform: rotate(45deg);
}

.cpa-lesson-practice-tools__close span::before {
  content: "";
  transform: rotate(90deg);
}

.cpa-lesson-practice-tools__tempo-row {
  margin-bottom: 9px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cpa-lesson-practice-tools__tempo-label,
.cpa-lesson-practice-tools__tempo-output {
  color: var(--cpa-practice-text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}

.cpa-lesson-practice-tools__tempo-output {
  color: #FFFFFF;
  font-weight: 800;
}

.cpa-lesson-practice-tools__tempo-slider {
  width: 100%;
  height: 32px;
  margin: 0 0 12px;
  accent-color: var(--cpa-accent-readable);
  cursor: pointer;
}

.cpa-lesson-practice-tools__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.cpa-lesson-practice-tools__stepper {
  display: inline-grid;
  grid-template-columns: repeat(2, 36px);
  gap: 6px;
}

.cpa-lesson-practice-tools__stepper button,
.cpa-lesson-practice-tools__play {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  border: 1px solid var(--cpa-practice-control-border);
  border-radius: var(--cpa-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cpa-practice-control-bg);
  color: var(--cpa-practice-control-color);
  font-family: var(--cpa-font-ui);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background var(--cpa-motion-fast) var(--cpa-layout-ease),
    border-color var(--cpa-motion-fast) var(--cpa-layout-ease),
    color var(--cpa-motion-fast) var(--cpa-layout-ease),
    transform var(--cpa-motion-fast) var(--cpa-layout-ease);
}

.cpa-lesson-practice-tools__stepper button:hover,
.cpa-lesson-practice-tools__play:hover {
  border-color: var(--cpa-practice-line-strong);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.cpa-lesson-practice-tools__play {
  background: var(--cpa-accent-readable);
  border-color: var(--cpa-accent-readable);
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(237, 100, 59, 0.23);
}

.cpa-lesson-practice-tools.is-running .cpa-lesson-practice-tools__play {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(237, 100, 59, 0.42);
  color: var(--cpa-accent);
  box-shadow: none;
}

.cpa-lesson-practice-tools__play:disabled,
.cpa-lesson-practice-tools__play:disabled:hover {
  opacity: 0.54;
  cursor: not-allowed;
  transform: none;
}

.cpa-lesson-practice-tools__status {
  min-height: 16px;
  margin: 10px 0 0;
  color: var(--cpa-practice-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cpa-lesson-practice-tools,
  .cpa-lesson-practice-tools__toggle,
  .cpa-lesson-practice-tools__pulse,
  .cpa-lesson-practice-tools__panel,
  .cpa-lesson-practice-tools__stepper button,
  .cpa-lesson-practice-tools__play {
    transition: none;
  }

  .cpa-lesson-practice-tools.is-beating .cpa-lesson-practice-tools__pulse,
  .cpa-lesson-practice-tools__toggle:hover,
  .cpa-lesson-practice-tools.is-open .cpa-lesson-practice-tools__toggle,
  .cpa-lesson-practice-tools__stepper button:hover,
  .cpa-lesson-practice-tools__play:hover {
    transform: none;
  }
}

/* =========================================================
   9. Lesson panels / plugin outputs

   Panels remain intentional on Lesson pages because each surface contains
   a distinct learning task or plugin-owned state. The treatment is quieter
   and more consistent with the open Home/Map typography and spacing.
   ========================================================= */

.cpa-lesson__panel {
  padding: 19px 20px 21px;
  border: 1px solid rgba(232, 222, 212, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 10px 28px rgba(30, 27, 24, 0.042);
}

.cpa-lesson__objectives-card,
.cpa-lesson__resources-card,
.cpa-lesson__notes-card {
  padding: 24px 28px 28px !important;
}

.cpa-lesson__panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
}

.cpa-lesson__objectives-card .cpa-lesson__panel-header {
  margin-bottom: 12px;
}

.cpa-lesson__resources-card .cpa-lesson__panel-header,
.cpa-lesson__notes-card .cpa-lesson__panel-header {
  margin-bottom: 15px;
}

.cpa-lesson__panel-header h2,
.cpa-lesson__objectives-card .cpa-lesson__panel-header h2,
.cpa-lesson__resources-card .cpa-lesson__panel-header h2,
.cpa-lesson__notes-card .cpa-lesson__panel-header h2 {
  min-width: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cpa-ink);
  font-family: var(--cpa-font-ui);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-transform: none !important;
}

.cpa-lesson__panel-header h2::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  display: block;
  background: var(--cpa-course-color);
}

.cpa-lesson__panel-header span,
.cpa-lesson__resources-card .cpa-lesson__panel-header > span,
.cpa-lesson__notes-card .cpa-lesson__panel-header span {
  color: var(--cpa-secondary-deep);
  font-family: var(--cpa-font-ui);
  font-size: 13px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cpa-lesson__resources-output,
.cpa-lesson__notes-output {
  min-height: 0;
  padding: 19px 0 0;
  border: 0 !important;
  border-top: 1px solid var(--cpa-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cpa-ink);
  font-family: var(--cpa-font-body);
  font-size: 14px;
  line-height: 1.62;
}

.cpa-lesson__resources-output,
.cpa-lesson__resources-output *,
.cpa-lesson__notes-output,
.cpa-lesson__notes-output * {
  box-sizing: border-box;
  max-width: 100%;
}

.cpa-lesson__resources-output {
  overflow-wrap: anywhere;
}

/* =========================================================
   Lesson Objectives / ProgressAlly output
   ========================================================= */

/* Main wrapper */
.cpa-lesson__objectives-output {
  color: var(--cpa-ink);
  font-family: var(--cpa-font-body);
  font-size: 14px;
  line-height: 1.45;
}

/* Strong ProgressAlly reset inside our lesson template only */
.cpa-lesson__objectives-output *,
.cpa-lesson__objectives-output *::before,
.cpa-lesson__objectives-output *::after {
  box-sizing: border-box;
}

.cpa-lesson__objectives-output .objective-table,
.cpa-lesson__objectives-output .progressally-objective-table {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: initial !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove old generated/plugin visual clutter */
.cpa-lesson__objectives-output .objective-number,
.cpa-lesson__objectives-output .pa-objective-circle,
.cpa-lesson__objectives-output .objective-number::before,
.cpa-lesson__objectives-output .objective-number::after,
.cpa-lesson__objectives-output .pa-objective-circle::before,
.cpa-lesson__objectives-output .pa-objective-circle::after,
.cpa-lesson__objectives-output .progressally-time-target::before,
.cpa-lesson__objectives-output .progressally-time-target::after,
.cpa-lesson__objectives-output .objective-description::before,
.cpa-lesson__objectives-output .objective-description::after {
  content: none !important;
  display: none !important;
}

/* Objective row */
.cpa-lesson__objectives-output .progressally-flex-row {
  position: relative !important;
  width: 100% !important;
  min-height: 58px;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--cpa-line-soft) !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition:
    background var(--cpa-motion-fast) ease,
    color var(--cpa-motion-fast) ease;
}

.cpa-lesson__objectives-output .progressally-flex-row:first-child {
  border-top: 0 !important;
}

.cpa-lesson__objectives-output .progressally-flex-row:hover {
  background: transparent !important;
}

/* Kill table/flex-cell leakage from plugin CSS */
.cpa-lesson__objectives-output .progressally-flex-cell {
  float: none !important;
  clear: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Completion control moved to left */
.cpa-lesson__objectives-output .objective-completion {
  grid-column: 1;
  grid-row: 1;
  position: relative !important;
  justify-self: center !important;
  align-self: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide native checkbox but preserve label functionality */
.cpa-lesson__objectives-output .completion-checkbox {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Custom circular checkbox */
.cpa-lesson__objectives-output .progressally-space-click {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid #DCD5CE !important;
  border-radius: 999px !important;
  display: block !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background var(--cpa-motion-fast) ease,
    border-color var(--cpa-motion-fast) ease,
    transform var(--cpa-motion-fast) ease,
    box-shadow var(--cpa-motion-fast) ease !important;
}

/* Remove any plugin checkbox pseudo-elements */
.cpa-lesson__objectives-output .progressally-space-click::before {
  content: none !important;
  display: none !important;
}

/* Our checkmark */
.cpa-lesson__objectives-output .progressally-space-click::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  opacity: 0;
  display: block !important;
  transform: translate(-50%, -60%) rotate(-45deg);
  transition: opacity 0.14s ease;
}

.cpa-lesson__objectives-output .progressally-space-click:hover {
  border-color: var(--cpa-secondary) !important;
  background: var(--cpa-secondary-wash) !important;
  transform: scale(1.04) !important;
}

/* Checked state */
.cpa-lesson__objectives-output .progressally-space-click[aria-checked="true"] {
  border-color: var(--cpa-secondary) !important;
  background: var(--cpa-secondary) !important;
}

.cpa-lesson__objectives-card.cpa-objectives-all-complete .cpa-lesson__objectives-output .progressally-space-click[aria-checked="true"] {
  border-color: var(--cpa-accent) !important;
  background: var(--cpa-accent) !important;
}

.cpa-lesson__objectives-output .progressally-space-click[aria-checked="true"]::after {
  opacity: 1;
}

/* Objective text */
.cpa-lesson__objectives-output .objective-description {
  grid-column: 2;
  grid-row: 1;
  position: relative !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--cpa-ink) !important;
  font-family: var(--cpa-font-ui);
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  text-indent: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    color var(--cpa-motion-fast) ease,
    opacity var(--cpa-motion-fast) ease;
}

.cpa-lesson__objectives-output .objective-description:hover {
  color: var(--cpa-accent-readable) !important;
}

/* Completed objective row */
.cpa-lesson__objectives-output .progressally-flex-row:has(.progressally-space-click[aria-checked="true"]) {
  background: transparent !important;
}

.cpa-lesson__objectives-output .progressally-flex-row:has(.progressally-space-click[aria-checked="true"]) .objective-description {
  color: var(--cpa-muted) !important;
  opacity: 0.95;
  font-weight: 500 !important;
}

/* Focus states */
.cpa-lesson__objectives-output .progressally-space-click:focus {
  outline: none !important;
}

.cpa-lesson__objectives-output .progressally-space-click:focus-visible {
  box-shadow: 0 0 0 3px var(--cpa-focus-blue) !important;
}

/* Kill any plugin table/cell spacing that leaks through */
.cpa-lesson__objectives-output td,
.cpa-lesson__objectives-output th {
  border: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   Lesson Objectives - timestamp pill enhancement
   ========================================================= */

/* Add third column for time pill */
.cpa-lesson__objectives-output .progressally-flex-row {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
}

/* Objective text no longer behaves visually like the jump target */
.cpa-lesson__objectives-output .objective-description {
  cursor: default !important;
}

.cpa-lesson__objectives-output .objective-description:hover {
  color: var(--cpa-ink) !important;
}

.cpa-lesson__objectives-output .progressally-flex-row:has(.progressally-space-click[aria-checked="true"]) .objective-description:hover {
  color: var(--cpa-muted) !important;
}

/* Right-side timestamp pill */
.cpa-objective-time-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  min-height: 26px;
  padding: 0 10px !important;
  border: 1px solid var(--cpa-line) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FFFFFF !important;
  color: var(--cpa-ink) !important;
  font-family: var(--cpa-font-ui) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 550 !important;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer !important;
  box-shadow: none !important;
  transition:
    background var(--cpa-motion-fast) ease,
    border-color var(--cpa-motion-fast) ease,
    color var(--cpa-motion-fast) ease,
    transform var(--cpa-motion-fast) ease,
    box-shadow var(--cpa-motion-fast) ease !important;
}

.cpa-objective-time-pill::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateX(1px);
}

.cpa-objective-time-pill:hover {
  background: var(--cpa-secondary-wash) !important;
  border-color: rgba(var(--cpa-secondary-rgb), 0.34) !important;
  color: var(--cpa-secondary-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 27, 24, 0.045) !important;
}

.cpa-objective-time-pill:focus {
  outline: none !important;
}

.cpa-objective-time-pill:focus-visible {
  box-shadow: 0 0 0 3px var(--cpa-focus-blue) !important;
}

.cpa-objective-time-pill__label {
  display: inline-block;
}

/* Completed rows keep the time pill available but quieter */
.cpa-lesson__objectives-output .progressally-flex-row:has(.progressally-space-click[aria-checked="true"]) .cpa-objective-time-pill {
  color: var(--cpa-muted) !important;
  background: #FFFFFF !important;
}

/* Mobile tightening */
@media (max-width: 560px) {
  .cpa-lesson__objectives-output .progressally-flex-row {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .cpa-objective-time-pill {
    min-height: 28px;
    padding: 0 9px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   Lesson Objectives - progress summary and bar
   ========================================================= */

.cpa-objectives-progress-summary {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  color: var(--cpa-secondary-deep);
  font-family: var(--cpa-font-ui);
  font-size: 13.5px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cpa-lesson__objectives-card.cpa-objectives-all-complete .cpa-objectives-progress-summary,
.cpa-lesson__objectives-card.cpa-objectives-all-complete .cpa-objectives-progress-summary span {
  color: var(--cpa-accent-readable) !important;
}

.cpa-lesson__objectives-card .cpa-objectives-progress-current {
  color: var(--cpa-ink) !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums;
}

.cpa-lesson__objectives-card .cpa-objectives-progress-total {
  color: var(--cpa-secondary) !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums;
}

.cpa-lesson__objectives-card .cpa-objectives-progress-separator,
.cpa-lesson__objectives-card .cpa-objectives-progress-text {
  color: var(--cpa-secondary) !important;
  font-weight: 650 !important;
}

.cpa-objectives-progressbar {
  width: 100%;
  height: 5px;
  margin: 0 0 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(232, 222, 212, 0.88);
}

.cpa-objectives-progressbar__fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--cpa-secondary);
  transition:
    width var(--cpa-motion-medium) var(--cpa-layout-ease),
    background 0.22s ease;
}

.cpa-lesson__objectives-card.cpa-objectives-all-complete .cpa-objectives-progressbar__fill {
  background: var(--cpa-accent);
}

/* Mobile */
@media (max-width: 560px) {
  .cpa-lesson__objectives-card .cpa-lesson__panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cpa-objectives-progress-summary {
    font-size: 12.5px;
  }

  .cpa-objectives-progressbar {
    margin-bottom: 14px;
  }
}

/* =========================================================
   Additional Resources / flexible lesson extras

   Intent:
   - Optional teacher-authored WYSIWYG resources panel.
   - Hidden by PHP when cpa_lesson_additional_resources is blank.
   - Shares panel/header/output foundations with notes and objectives.
   ========================================================= */

.cpa-lesson__resources-output > *:first-child { margin-top: 0 !important; }
.cpa-lesson__resources-output > *:last-child { margin-bottom: 0 !important; }

.cpa-lesson__resources-output p {
  margin: 0 0 12px;
}

.cpa-lesson__resources-output h1,
.cpa-lesson__resources-output h2,
.cpa-lesson__resources-output h3,
.cpa-lesson__resources-output h4,
.cpa-lesson__resources-output h5,
.cpa-lesson__resources-output h6 {
  margin: 18px 0 8px;
  color: var(--cpa-ink);
  font-family: var(--cpa-font-ui);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.cpa-lesson__resources-output h1,
.cpa-lesson__resources-output h2 { font-size: 17px; }
.cpa-lesson__resources-output h3 { font-size: 15.5px; }
.cpa-lesson__resources-output h4,
.cpa-lesson__resources-output h5,
.cpa-lesson__resources-output h6 { font-size: 14px; }

.cpa-lesson__resources-output ul,
.cpa-lesson__resources-output ol {
  margin: 0 0 14px 1.15em;
  padding: 0;
}

.cpa-lesson__resources-output li {
  margin: 6px 0;
  padding-left: 2px;
}

.cpa-lesson__resources-output a,
.cpa-lesson__resources-output a:visited {
  color: var(--cpa-accent-readable) !important;
  font-weight: 650;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(237, 100, 59, 0.28);
  box-shadow: none !important;
  transition:
    color var(--cpa-motion-fast) ease,
    border-color var(--cpa-motion-fast) ease,
    background var(--cpa-motion-fast) ease;
}

.cpa-lesson__resources-output a:hover,
.cpa-lesson__resources-output a:focus-visible {
  color: var(--cpa-accent-hover) !important;
  border-bottom-color: currentColor;
  outline: none;
}

.cpa-lesson__resources-output a:focus-visible {
  box-shadow: 0 0 0 3px rgba(237, 100, 59, 0.13) !important;
}

.cpa-lesson__resources-output blockquote {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--cpa-secondary);
  border-radius: 0 var(--cpa-radius) var(--cpa-radius) 0;
  background: var(--cpa-secondary-wash);
  color: var(--cpa-muted);
}

.cpa-lesson__resources-output img,
.cpa-lesson__resources-output video,
.cpa-lesson__resources-output iframe,
.cpa-lesson__resources-output embed,
.cpa-lesson__resources-output object {
  max-width: 100%;
}

.cpa-lesson__resources-output img {
  height: auto;
  border-radius: var(--cpa-radius);
}

.cpa-lesson__resources-output .wp-block-button__link,
.cpa-lesson__resources-output a.button,
.cpa-lesson__resources-output a.wp-element-button {
  min-height: 38px;
  padding: 0 14px !important;
  border: 1px solid rgba(237, 100, 59, 0.28) !important;
  border-radius: var(--cpa-radius-pill) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #FFFFFF !important;
  color: var(--cpa-accent-readable) !important;
  font-family: var(--cpa-font-ui) !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  text-decoration: none !important;
  box-shadow: var(--cpa-shadow-button) !important;
}

.cpa-lesson__resources-output .wp-block-button__link:hover,
.cpa-lesson__resources-output a.button:hover,
.cpa-lesson__resources-output a.wp-element-button:hover {
  border-color: rgba(237, 100, 59, 0.45) !important;
  transform: translateY(-1px);
  box-shadow: var(--cpa-shadow-button-hover) !important;
}

/* =========================================================
   Personal Lesson Notes / ProgressAlly native containment

   Intent:
   - ProgressAlly owns note view/edit/save/cancel behaviour.
   - CPA provides only the outer panel, header and safe containment.
   - No custom note view mode, no click interception, no MutationObserver,
     and no styling that forces ProgressAlly display/input states.
   ========================================================= */

.cpa-lesson__notes-output .progressally-note-block {
  width: 100%;
  max-width: 100%;
}

.cpa-lesson__notes-output textarea,
.cpa-lesson__notes-output input[type="text"],
.cpa-lesson__notes-output input[type="email"],
.cpa-lesson__notes-output input[type="url"],
.cpa-lesson__notes-output input[type="search"] {
  max-width: 100%;
}

/* iOS Safari guard: focused text fields below 16px can trigger page zoom. */
@media (max-width: 767px) {
  .cpa-lesson__notes-output textarea,
  .cpa-lesson__notes-output input[type="text"],
  .cpa-lesson__notes-output input[type="email"],
  .cpa-lesson__notes-output input[type="url"],
  .cpa-lesson__notes-output input[type="search"] {
    font-size: 16px !important;
  }
}

/* =========================================================
   10. SoundSlice modal
   ========================================================= */

.cpa-soundslice-is-open,
.cpa-soundslice-is-open body {
  overflow: hidden;
}

.cpa-soundslice-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s var(--cpa-layout-ease),
    visibility 0s linear 0.28s;
}

.cpa-soundslice-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.28s var(--cpa-layout-ease),
    visibility 0s linear 0s;
}

.cpa-soundslice-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 27, 24, 0.48);
  opacity: 0;
  transition: opacity 0.28s var(--cpa-layout-ease);
}

.cpa-soundslice-modal.is-open .cpa-soundslice-modal__backdrop {
  opacity: 1;
}

.cpa-soundslice-modal__panel {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cpa-bg-page);
  box-shadow: 0 -18px 42px rgba(30, 27, 24, 0.18);
  transform: translateY(100%);
  transition: transform 0.36s var(--cpa-layout-ease);
  will-change: transform;
}

.cpa-soundslice-modal.is-open .cpa-soundslice-modal__panel {
  transform: translateY(0);
}

.cpa-soundslice-modal__header {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cpa-lesson-chrome-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--cpa-lesson-chrome-bg-stack);
  color: var(--cpa-lesson-chrome-text);
}

.cpa-soundslice-modal__header > div {
  min-width: 0;
}

.cpa-soundslice-modal__kicker {
  margin: 0 0 4px;
  color: var(--cpa-secondary);
  font-family: var(--cpa-font-ui);
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cpa-soundslice-modal__header h2 {
  margin: 0;
  color: var(--cpa-lesson-chrome-text);
  font-family: var(--cpa-font-ui);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpa-soundslice-modal__close {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  flex: 0 0 auto;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--cpa-lesson-control-border) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cpa-lesson-control-bg) !important;
  color: var(--cpa-lesson-control-color) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  box-shadow: var(--cpa-lesson-control-shadow) !important;
  overflow: hidden;
  transition:
    background var(--cpa-motion-fast) ease,
    border-color var(--cpa-motion-fast) ease,
    color var(--cpa-motion-fast) ease,
    transform var(--cpa-motion-fast) ease,
    box-shadow var(--cpa-motion-fast) ease !important;
}

.cpa-soundslice-modal__close::before,
.cpa-soundslice-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  display: block;
  background: currentColor;
  transform-origin: center;
}

.cpa-soundslice-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cpa-soundslice-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cpa-soundslice-modal__close:hover {
  background: var(--cpa-lesson-control-hover-bg) !important;
  border-color: var(--cpa-lesson-control-hover-border) !important;
  color: var(--cpa-lesson-control-hover-color) !important;
  box-shadow: var(--cpa-lesson-control-hover-shadow) !important;
  transform: translateY(-1px);
}

.cpa-soundslice-modal__close:focus {
  outline: none !important;
}

.cpa-soundslice-modal__close:focus-visible {
  border-color: var(--cpa-lesson-control-hover-border) !important;
  box-shadow: 0 0 0 3px var(--cpa-lesson-control-focus-ring) !important;
}

.cpa-soundslice-modal__embed {
  flex: 1 1 auto;
  min-height: 0;
  background: #FFFFFF;
}

.cpa-soundslice-modal__embed iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cpa-soundslice-modal,
  .cpa-soundslice-modal__backdrop,
  .cpa-soundslice-modal__panel {
    transition: none !important;
  }
}