/* ==========================================================================
   Carnaby Creative — LearnDash styling
   Drops onto LD's default markup using the existing theme tokens
   (variables.css). Disables LD's own stylesheet via filters in functions.php
   so this file is the single source of truth for LMS visual style.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tame LearnDash defaults
   --------------------------------------------------------------------------- */

.learndash-wrapper,
.learndash-wrapper * {
  font-family: var(--font-body);
  box-sizing: border-box;
}

.learndash-wrapper {
  color: var(--color-text-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper h4 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-heading-sm);
  line-height: var(--leading-heading);
}

/* LD's pill labels and section headers — flatten and re-style. */
.learndash-wrapper .ld-section-heading {
  background: transparent;
  padding: 0;
  border: none;
  margin: 0 0 var(--space-md);
}
.learndash-wrapper .ld-section-heading h2 {
  font-size: var(--text-h2-alt);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. Buttons (LD button → match Phase 1 button system)
   --------------------------------------------------------------------------- */

.learndash-wrapper .ld-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-white);
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0 var(--space-lg);
  height: var(--size-btn-h);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .ld-button:focus {
  background: var(--color-primary-darkest);
  color: var(--color-text-white);
  transform: translateY(-1px);
}
.learndash-wrapper .ld-button:active { transform: translateY(0); }
.learndash-wrapper .ld-button:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
}

.learndash-wrapper .ld-button.ld-button-alternate,
.learndash-wrapper .ld-button.ld-button-transparent {
  background: transparent;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-border);
}
.learndash-wrapper .ld-button.ld-button-alternate:hover,
.learndash-wrapper .ld-button.ld-button-transparent:hover {
  border-color: var(--color-primary-dark);
  background: transparent;
  color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
   3. Breadcrumb (used on lesson/topic/quiz pages, generated by templates)
   --------------------------------------------------------------------------- */

.cc-ld-breadcrumb {
  padding: var(--space-md) 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-breadcrumb);
}
.cc-ld-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}
.cc-ld-breadcrumb a:hover { color: var(--color-primary-dark); }
.cc-ld-breadcrumb .current {
  color: var(--color-text-heading);
  font-weight: var(--weight-medium);
}
.cc-ld-breadcrumb .sep {
  margin: 0 var(--space-xs);
  color: var(--color-text-faint);
}

/* ---------------------------------------------------------------------------
   4. Lesson layout (two-column with sticky sidebar)
   --------------------------------------------------------------------------- */

.cc-lesson-layout {
  display: grid;
  grid-template-columns: 1fr 21.25rem; /* 340px sidebar */
  gap: var(--space-content-gap);
  padding: var(--space-section-y-sm) var(--space-container);
  align-items: start;
  max-width: var(--size-container-max);
  margin: 0 auto;
}

.cc-lesson-indicator {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-featured);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.cc-lesson-main h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-lg);
}

.cc-lesson-content,
.cc-topic-content-body {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  margin-bottom: var(--space-lg);
}
.cc-lesson-content > * + *,
.cc-topic-content-body > * + * { margin-top: var(--space-md); }

/* H2/H3 inside the lesson + topic body are sized one third smaller than
   the page-level H2/H3 — at this depth the heading is a sub-section
   marker, not a page header, so the page-level scale read too loud. */
.cc-lesson-content h2,
.cc-topic-content-body h2 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18px → 24px */
  color: var(--color-text-heading);
  margin: var(--space-lg) 0 var(--space-sm);
}
.cc-lesson-content h3,
.cc-topic-content-body h3 {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px → 18px */
  color: var(--color-text-heading);
  margin: var(--space-md) 0 var(--space-sm);
}
.cc-lesson-content img,
.cc-topic-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
/* Re-enable list bullets/numbers inside lesson + topic body content.
   The theme's `reset.css` strips `list-style` on every `<ul>` / `<ol>`
   site-wide (Tailwind-style preflight) — fine for nav and bespoke
   menus, but plain bullet lists in lesson copy come out flush-left
   with no markers. We restore them here so authors can drop a
   standard list block into a lesson and have it render as expected. */
.cc-lesson-content ul,
.cc-topic-content-body ul,
.cc-lesson-content ol,
.cc-topic-content-body ol {
  padding-left: 1.5rem;
  list-style: revert;
}
.cc-lesson-content ul,
.cc-topic-content-body ul { list-style: disc; }
.cc-lesson-content ol,
.cc-topic-content-body ol { list-style: decimal; }
.cc-lesson-content ul ul,
.cc-topic-content-body ul ul { list-style: circle; }
.cc-lesson-content ol ol,
.cc-topic-content-body ol ol { list-style: lower-alpha; }
/* Marker colour matched to the heading colour so bullets don't look
   like an after-thought sitting in light grey. */
.cc-lesson-content li::marker,
.cc-topic-content-body li::marker { color: var(--color-text-heading); }
.cc-lesson-content li + li,
.cc-topic-content-body li + li { margin-top: 0.25rem; }
/* Lists nested inside our `cc_aims`, `cc_callout`, etc. components
   already have their own bespoke styling — opt them out so we don't
   double up on bullets. */
.cc-lesson-content .cc-aims ul,
.cc-topic-content-body .cc-aims ul,
.cc-lesson-content .cc-callout ul,
.cc-topic-content-body .cc-callout ul,
.cc-lesson-content .cc-note ul,
.cc-topic-content-body .cc-note ul,
.cc-lesson-content .cc-compare ul,
.cc-topic-content-body .cc-compare ul { list-style: none; padding-left: 0; }

/* ---- Quiz CTA cards in the lesson body ---- */
/* Surfaces lesson-attached quizzes as a clickable card before the nav row.
   Two variants: knowledge check (default) + final assessment (--final). */
.cc-lesson-quizzes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.cc-lesson-quiz-card {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.cc-lesson-quiz-card:hover,
.cc-lesson-quiz-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  outline: none;
  transform: translateY(-1px);
}
.cc-lesson-quiz-card.is-final {
  background: var(--color-primary-tint);
  border-color: var(--color-primary);
}
/* Completion state — checkmark icon, muted body, "· Completed" status
   inline with the eyebrow. CTA label flips to "Retake quiz" via PHP. */
.cc-lesson-quiz-card.is-done {
  background: var(--color-bg-alt);
}
.cc-lesson-quiz-card.is-done .cc-lesson-quiz-card__icon {
  background: var(--color-primary-dark);
}
/* Locked state — quiz is gated behind topic completion. The whole card
   is muted (lighter bg, lock icon, neutral CTA pill, no chevron). For
   subscribers the wrapper is rendered as <div> so it isn't clickable;
   admins (manage_options) get an <a> so previews still work but the
   visual lock state is identical. */
.cc-lesson-quiz-card.is-locked {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}
.cc-lesson-quiz-card.is-locked .cc-lesson-quiz-card__icon {
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.cc-lesson-quiz-card.is-locked .cc-lesson-quiz-card__title,
.cc-lesson-quiz-card.is-locked .cc-lesson-quiz-card__eyebrow {
  color: var(--color-text-muted);
}
.cc-lesson-quiz-card.is-locked .cc-lesson-quiz-card__cta {
  background: var(--color-border);
  color: var(--color-text-muted);
}
/* The non-clickable subscriber variant — div wrapper. Suppress hover
   lift/shadow + show the not-allowed cursor so it reads as inert. */
div.cc-lesson-quiz-card.is-locked {
  cursor: not-allowed;
}
div.cc-lesson-quiz-card.is-locked:hover,
div.cc-lesson-quiz-card.is-locked:focus-visible {
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
}
div.cc-lesson-quiz-card.is-locked:hover .cc-lesson-quiz-card__cta {
  background: var(--color-border);
}
/* Admin preview (anchor wrapper) — keep the muted look on hover, since
   the whole card is "Locked" and we don't want to imply primary CTA. */
a.cc-lesson-quiz-card.is-locked:hover,
a.cc-lesson-quiz-card.is-locked:focus-visible {
  border-color: var(--color-text-muted);
}
a.cc-lesson-quiz-card.is-locked:hover .cc-lesson-quiz-card__cta,
a.cc-lesson-quiz-card.is-locked:focus-visible .cc-lesson-quiz-card__cta {
  background: var(--color-text-muted);
  color: var(--color-bg-white);
}
.cc-lesson-quiz-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-bg-white);
}
.cc-lesson-quiz-card__status {
  margin-left: 0.25rem;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-eyebrow);
}
.cc-lesson-quiz-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cc-lesson-quiz-card__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary-dark);
}
.cc-lesson-quiz-card__title {
  margin: 0;
  font-size: var(--text-h4);
  color: var(--color-text-heading);
}
.cc-lesson-quiz-card__intro {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body);
}
.cc-lesson-quiz-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.cc-lesson-quiz-card:hover .cc-lesson-quiz-card__cta,
.cc-lesson-quiz-card:focus-visible .cc-lesson-quiz-card__cta {
  background: var(--color-primary-dark);
}
@media (max-width: 640px) {
  .cc-lesson-quiz-card {
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
  }
  .cc-lesson-quiz-card__cta {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* ---- Reusable content blocks (used inside lesson/topic body) ---- */

/* Callout — light blue tinted card with primary-coloured heading. */
.cc-callout {
  background: var(--color-primary-tint);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}
.cc-callout h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3-lg);
  color: var(--color-primary-darkest);
  margin: 0 0 0.5rem;
}
.cc-callout p { margin: 0 0 0.75rem; color: var(--color-text-body); }
.cc-callout p:last-child { margin-bottom: 0; }

.cc-callout--dark {
  background: var(--color-primary-darkest);
  border-left-color: var(--color-primary-light);
  color: var(--color-text-white);
}
.cc-callout--dark p,
.cc-callout--dark h3 { color: var(--color-text-white); }

.cc-callout--center { text-align: center; border-left: 0; padding: var(--space-lg); }
.cc-callout--center p { font-size: var(--text-body-featured); font-weight: var(--weight-medium); }

/* Two-column comparison layout (hyper/hyposensitive, etc.). */
.cc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
.cc-two-col__col {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.cc-two-col__col h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3-lg);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm);
}
@media (max-width: 48rem) {
  .cc-two-col { grid-template-columns: 1fr; }
}

/* Terminology comparison table. */
.cc-terminology-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: var(--text-body);
}
.cc-terminology-table thead {
  background: var(--color-primary-tint);
}
.cc-terminology-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-darkest);
  border-bottom: 2px solid var(--color-border);
}
.cc-terminology-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
}
.cc-terminology-table tr:last-child td { border-bottom: 0; }

/* Responsive YouTube/iframe embed. */
.cc-video {
  margin: var(--space-md) 0;
}
.cc-video__frame {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  background: var(--color-bg-input);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cc-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cc-video figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* Pull-quote / testimonial-style quote block. */
.cc-pullquote {
  margin: var(--space-md) 0;
  padding: var(--space-lg);
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.cc-pullquote blockquote {
  margin: 0 0 var(--space-sm);
  border: 0;
  padding: 0;
}
.cc-pullquote blockquote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-featured);
  font-style: italic;
  color: var(--color-text-body);
  line-height: 1.65;
}
.cc-pullquote figcaption {
  display: flex;
  flex-direction: column;
  font-style: normal;
  color: var(--color-text-muted);
  font-size: var(--text-body);
}
.cc-pullquote figcaption strong {
  color: var(--color-text-heading);
  font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------------------
   5. Topic sidebar (sticky right rail in lesson view)
   --------------------------------------------------------------------------- */

.cc-topic-sidebar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: sticky;
  top: calc(var(--size-nav-h) + 1rem);
  background: var(--color-bg-white);
}
.cc-topic-sidebar-header {
  padding: var(--space-md) var(--space-md);
  background: var(--color-primary-darkest);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.cc-topic-sidebar-header svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-white-65);
}

/* Empty state shown in the sidebar when a lesson has no topics — keeps
   the page layout consistent with multi-topic lessons rather than
   collapsing to single-column. */
.cc-topic-sidebar-empty {
  padding: var(--space-md);
}
.cc-topic-sidebar-empty p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.cc-topic-item {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-bg-success-section);
  font-size: var(--text-body);
  color: var(--color-text-body);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cc-topic-item:last-child { border-bottom: none; }
.cc-topic-item:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.cc-topic-item.is-current {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: var(--weight-semibold);
}
/* Locked sidebar item — not a link, muted, padlock icon. Renders as a
   <span aria-disabled="true"> from the lesson + topic templates when
   linear progression hasn't reached this step yet. */
.cc-topic-item.is-locked {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.cc-topic-item.is-locked:hover {
  background: transparent;
  color: var(--color-text-muted);
}
.cc-topic-item.is-locked .cc-topic-check {
  border-style: dashed;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

/* CSS-only tooltip for locked next-lesson / next-topic buttons. The
   lock-state span carries data-lock-msg="…" and the ::after pseudo
   reads it via attr() — appears on hover/focus, animates in subtly,
   slides above the button so it doesn't get clipped by the form chrome. */
.cc-lock-tooltip {
  position: relative;
}
.cc-lock-tooltip::after {
  content: attr(data-lock-msg);
  position: absolute;
  bottom: calc(100% + 0.625rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  background: var(--color-text-heading);
  color: var(--color-text-white);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 18rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cc-lock-tooltip::before {
  /* downward-pointing arrow into the button */
  content: '';
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  border: 6px solid transparent;
  border-top-color: var(--color-text-heading);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 10;
}
.cc-lock-tooltip:hover::after,
.cc-lock-tooltip:focus::after,
.cc-lock-tooltip:focus-visible::after,
.cc-lock-tooltip:hover::before,
.cc-lock-tooltip:focus::before,
.cc-lock-tooltip:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Locked prev/next buttons in cc-ld-nav. Rendered as <span class="ld-button is-locked">. */
.learndash-wrapper .ld-button.is-locked,
.ld-button.is-locked {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  cursor: not-allowed;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.learndash-wrapper .ld-button.is-locked:hover,
.ld-button.is-locked:hover {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  transform: none;
}

.cc-topic-check {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: 0.375rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
}
.cc-topic-check.is-done {
  background: var(--color-accent-green-bg);
  border-color: var(--color-accent-green-bg);
}
.cc-topic-check.is-done svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-primary-darkest);
}

/* ---------------------------------------------------------------------------
   6. Topic page (single-column, narrower max-width)
   --------------------------------------------------------------------------- */

.cc-topic-content {
  max-width: 50rem; /* 800px */
  margin: 0 auto;
  padding: var(--space-section-y-sm) var(--space-container) var(--space-section-y);
}
.cc-topic-content h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-lg);
}

/* ---------------------------------------------------------------------------
   7. Lesson/Topic navigation footer (Prev / Back / Mark Complete & Continue)
   --------------------------------------------------------------------------- */

.cc-ld-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-lg);
}
.cc-ld-nav-link {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap var(--transition-base);
}
.cc-ld-nav-link:hover { gap: 0.625rem; }
.cc-ld-nav-link svg { width: 1rem; height: 1rem; }

/* LD's Mark Complete control rendered into the right-most slot of the
   topic nav. We override its native styling so it visually matches our
   primary button (Figma 326:3502 "Mark Complete and Continue"). */
.cc-ld-nav__mark-complete { display: inline-flex; }
.cc-ld-nav__mark-complete form,
.cc-ld-nav__mark-complete .learndash_mark_complete_button,
.cc-ld-nav__mark-complete .ld-button-wrapper { margin: 0; padding: 0; background: none; border: 0; }
.cc-ld-nav__mark-complete input[type="submit"],
.cc-ld-nav__mark-complete button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-white);
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.75rem 2rem;
  height: auto;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}
.cc-ld-nav__mark-complete input[type="submit"]:hover,
.cc-ld-nav__mark-complete button:hover {
  background: var(--color-primary-darkest);
  transform: translateY(-1px);
}

@media (max-width: 60rem) {
  .cc-lesson-layout {
    grid-template-columns: 1fr;
  }
  .cc-topic-sidebar {
    position: static;
    margin-top: var(--space-md);
  }
  .cc-ld-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .cc-ld-nav .ld-button,
  .cc-ld-nav .cc-ld-nav-link {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   8. Quiz / Assessment — Figma 326:3659
   Layout: centred ~720px column with a "Quiz Types in This Course"
   reference card on top, then a state-card that wraps WPProQuiz's output.
   --------------------------------------------------------------------------- */

.cc-quiz-shell {
  max-width: 45rem; /* 720px */
  margin: 0 auto;
  padding: var(--space-section-y-sm) var(--space-container) var(--space-section-y);
}

/* State card — wraps the LearnDash quiz output. The 4px top accent bar
   colour shifts between pre / pass / fail (handled by JS-applied modifier
   classes if/when LD swaps state, or manually for static demos). */
.cc-quiz-card {
  position: relative;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl, 3rem) var(--space-lg);
  text-align: center;
  overflow: hidden;
}

.cc-quiz-card__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-featured);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.cc-quiz-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.3px;
}
.cc-quiz-card__intro {
  max-width: 30rem;
  margin: 0 auto var(--space-md);
  font-size: var(--text-body-featured);
  color: var(--color-text-body);
  line-height: var(--leading-body);
}
.cc-quiz-card__content {
  max-width: 30rem;
  margin: 0 auto var(--space-md);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  text-align: left;
}
.cc-quiz-card__quiz { text-align: left; }
.cc-quiz-card__quiz:not(:empty) { margin-top: var(--space-lg); }

/* The Start / Restart / Check / Next buttons sit immediately under the
   description copy. Give them a little breathing room — without it the
   "...your end mark." line crashes into the button.
   The post-content paragraph is rendered inside `.ld-tabs` and the buttons
   live in a sibling `.wpProQuiz_content`, so we space the gap on both
   ends so the chain (paragraph → buttons → question card) reads as
   distinct sections. */
.cc-quiz-card .ld-tabs { margin-bottom: var(--space-lg); }
.cc-quiz-card .wpProQuiz_content { margin-top: var(--space-md); }
.cc-quiz-card .wpProQuiz_content input.wpProQuiz_button { margin-top: var(--space-md); }

/* Center the top-level Start / Restart Quiz buttons. WPProQuiz wraps
   the start button in `.wpProQuiz_text > div` (two divs deep), so we
   target it by its semantic `name` attribute rather than DOM position
   — that way per-question buttons (`name="check"`, `name="next"`,
   etc) keep their default left placement. */
.cc-quiz-card input.wpProQuiz_button[name="startQuiz"],
.cc-quiz-card input.wpProQuiz_button[name="restartQuiz"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* WPProQuiz output overrides — keep our state-card chrome; let WPProQuiz
   handle questions / progress / results. */

/* Hide LD's stock breadcrumb + tabs wrapper (we render our own breadcrumb
   above the card). Only inside our quiz shell so we don't affect any
   other LD templates. */
.cc-quiz-shell .ld-quiz-status,
.cc-quiz-shell .ld-breadcrumbs,
.cc-quiz-shell .ld-tabs > nav,
.cc-quiz-shell .learndash-shortcode-wrap-ld_infobar { display: none !important; }

.cc-quiz-card .learndash-wrapper .wpProQuiz_content,
.learndash-wrapper .wpProQuiz_content {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
/* "Question X of Y" position indicator above each question. WPProQuiz
   renders this as `<div class="wpProQuiz_question_page" role="heading">`
   inside the `<li>` for each question (the numbers are populated via
   `<span>` placeholders). Hidden by default per WPProQuiz model setting
   `isHideQuestionPositionOverview`; we flip that to false in the
   import script's master-row pass. Style as a subtle eyebrow above
   the question card. */
.cc-quiz-card .wpProQuiz_question_page {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-featured);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--space-sm);
}
.cc-quiz-card .wpProQuiz_question_page span {
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
}

/* The question is wrapped in a `<fieldset>` with the question text in a
   `<legend>`. We strip the fieldset's card chrome — each answer item
   already renders as its own card (see `.wpProQuiz_questionListItem`
   below), so a wrapping outer card creates a nested-card visual that
   reads cluttered. The fieldset stays as a semantic grouping, just
   styled invisible. */
.learndash-wrapper fieldset.wpProQuiz_question {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
  text-align: left;
  min-inline-size: 0;
}
.learndash-wrapper legend.wpProQuiz_question_text,
.learndash-wrapper .wpProQuiz_question_text {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  /* Bottom margin gives breathing room between the question prompt
     and the first answer card. Without it the legend sits flush with
     the answer list. */
  margin: 0 0 var(--space-md);
  font-size: var(--text-h4-lg, var(--text-body-featured));
  /* Only the first paragraph (the question itself) is bold — additional
     paragraphs and lists below it are body weight. Long essay prompts
     used to render as one wall of semibold text which Ash flagged 5 May
     2026: "all being bold looks rubbish". The lede-then-context pattern
     mirrors how news intros work and reads much more comfortably. */
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--color-text-heading);
}
.learndash-wrapper .wpProQuiz_question_text > p:first-of-type {
  font-weight: var(--weight-semibold);
}
/* Vertical rhythm between paragraphs (was `margin: 0` which crushed
   multi-paragraph questions into a single block). */
.learndash-wrapper .wpProQuiz_question_text p {
  margin: 0 0 var(--space-sm);
}
.learndash-wrapper .wpProQuiz_question_text p:last-child {
  margin-bottom: 0;
}
/* Strip ghost paragraphs left over from WP block-editor authoring —
   the question source has `<p><!-- wp:paragraph --></p>` interleaved
   with real content. They render as visually empty space between
   paragraphs. `:empty` matches comment-only paragraphs in current
   browsers. */
.learndash-wrapper .wpProQuiz_question_text p:empty {
  display: none;
}
/* Inline emphasis. `<em>` weight inherits the surrounding paragraph's
   weight (so it reads as bold-italic in the lede paragraph and
   regular-italic in body paragraphs — both intentional). */
.learndash-wrapper .wpProQuiz_question_text em {
  font-style: italic;
  font-weight: inherit;
}
.learndash-wrapper .wpProQuiz_question_text strong,
.learndash-wrapper .wpProQuiz_question_text b {
  font-weight: var(--weight-semibold);
}
/* Lists — the question source contains <ul class="wp-block-list"> from
   the WP block editor. Default browser bullet/indent kept stripped by
   themes upstream, so we restore them here scoped to the question
   text. (Ash flagged 5 May 2026: "italic and unordered lists in the
   question, but this formatting doesn't show".) */
.learndash-wrapper .wpProQuiz_question_text ul,
.learndash-wrapper .wpProQuiz_question_text ol {
  margin: 0 0 var(--space-sm) 1.5rem;
  padding: 0;
  font-weight: var(--weight-regular);
}
.learndash-wrapper .wpProQuiz_question_text ul,
.learndash-wrapper .wpProQuiz_question_text ul.wp-block-list { list-style: disc outside; }
.learndash-wrapper .wpProQuiz_question_text ol { list-style: decimal outside; }
.learndash-wrapper .wpProQuiz_question_text li {
  margin: 0 0 0.25rem;
}
.learndash-wrapper .wpProQuiz_question_text li:last-child {
  margin-bottom: 0;
}

/* Strip the WPProQuiz default green-tint box around the answer list — that
   `#f8faf5` background + `#c3d1a3` border is hard-coded in the plugin CSS.
   Add a small horizontal inset so the answer cards don't run flush to the
   question card's inner edge — gives the selected highlight breathing
   room. */
.cc-quiz-card .wpProQuiz_questionList {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0.5rem !important;
  margin: 0;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Selector bumped to match LD plugin's
   `.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item)`
   so our rule actually wins. The original two-class selector was
   tying on specificity with WPProQuiz's `padding: 3px` rule, with
   load-order deciding who won.
   Note: `padding: 0` (with !important) is intentional. The padding
   that gives the row its tap-target now lives on the inner `<label>`
   below — that way the entire row, edge-to-edge, is the label's
   click area and toggles the radio. With padding on the wrapper, a
   click on the padding ring would land on the wrapper (not the label)
   and the input wouldn't toggle. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item),
.learndash-wrapper .wpProQuiz_questionListItem {
  position: relative;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 !important;
  margin: 0 0 0.5rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
/* Hover/checked/focus rules below all use the same heavy-specificity
   chain as the base rule above. Without it, the (0,0,4,0) base rule
   wins over a (0,0,3,0) hover/checked rule and the visual state never
   appears — the click was actually toggling the input, but the
   feedback was being eaten by the cascade. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item):hover,
.learndash-wrapper .wpProQuiz_questionListItem:hover {
  border-color: var(--color-primary) !important;
  background: var(--color-bg-alt) !important;
}
/* Essay-type question rows shouldn't have the radio/checkbox card
   chrome — the wrapping <li> contains a <textarea> with its own
   border + chrome, so the parent rules above paint a phantom border
   + tinted hover behind it. Ash flagged 5 May 2026: "remove the hover
   from the textarea — keep it on radios/checkboxes." Targeting via
   `:has(textarea)` is exactly the discrimination we need. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item):has(textarea),
.learndash-wrapper .wpProQuiz_questionListItem:has(textarea) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item):has(textarea):hover,
.learndash-wrapper .wpProQuiz_questionListItem:has(textarea):hover {
  background: transparent !important;
  border-color: transparent !important;
}

/* Hide the native radio/checkbox visually but keep it focusable +
   clickable. We park it offscreen rather than `display: none` so screen
   readers + keyboard navigation still work. The implicit label→input
   association means clicking the label still toggles the input. */
.learndash-wrapper .wpProQuiz_questionListItem input[type="radio"],
.learndash-wrapper .wpProQuiz_questionListItem input[type="checkbox"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Label is the layout primitive AND the click target. Inline flex puts
   the swatch + text on one line, and the swatch is rendered by
   `::before` so it lives in flow alongside the answer text (no absolute
   positioning needed).
   `width: 100%` + the padding (moved off the wrapper, onto here)
   makes the label span the entire row — clicking anywhere from the
   border inwards lands on the label and toggles the input. */
.learndash-wrapper .wpProQuiz_questionListItem label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 1.5rem 1.125rem;
  font-size: var(--text-body-featured);
  font-weight: var(--weight-medium);
  color: var(--color-text-heading);
  cursor: pointer;
  margin: 0;
  line-height: 1.45;
  box-sizing: border-box;
}
.learndash-wrapper .wpProQuiz_questionListItem label::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  background: var(--color-bg-white);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
/* Radios get circles, checkboxes get rounded squares. Detect via :has on
   the LI parent. */
.cc-quiz-card .wpProQuiz_questionListItem:has(input[type="radio"]) label::before {
  border-radius: 50%;
}
.cc-quiz-card .wpProQuiz_questionListItem:has(input[type="checkbox"]) label::before {
  border-radius: 0.25rem;
}

/* Checked → fill swatch + tint whole card. */
.cc-quiz-card .wpProQuiz_questionListItem:has(input[type="radio"]:checked) label::before {
  border-color: var(--color-primary-dark);
  background:
    radial-gradient(circle at center, var(--color-bg-white) 0 24%, transparent 26%),
    var(--color-primary-dark);
}
.cc-quiz-card .wpProQuiz_questionListItem:has(input[type="checkbox"]:checked) label::before {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.875rem 0.875rem;
}
/* Checked card tint — same heavy chain so it beats the base rule's
   `background: var(--color-bg-white)`. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item):has(input:checked),
.cc-quiz-card .wpProQuiz_questionListItem:has(input:checked) {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-tint) !important;
}

/* Keyboard focus on the swatch (the native input is offscreen). */
.cc-quiz-card .wpProQuiz_questionListItem:has(input:focus-visible) label::before {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The "Correct / Incorrect / Correct answer" feedback labels live inside
   `.ld-quiz-question-item__status` and were leaking through visually.
   Hide all three by default — WPProQuiz JS toggles their visibility via
   modifier classes after submit. */
.cc-quiz-card .ld-quiz-question-item__status,
.cc-quiz-card .ld-quiz-question-item__status--correct,
.cc-quiz-card .ld-quiz-question-item__status--incorrect,
.cc-quiz-card .ld-quiz-question-item__status--missed { display: none; }
.cc-quiz-card .wpProQuiz_questionListItem.is-correct .ld-quiz-question-item__status--correct,
.cc-quiz-card .wpProQuiz_questionListItem.is-incorrect .ld-quiz-question-item__status--incorrect,
.cc-quiz-card .wpProQuiz_questionListItem.ld-quiz-question-item--missed .ld-quiz-question-item__status--missed {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.learndash-wrapper .wpProQuiz_questionListItem.is-correct,
.learndash-wrapper .wpProQuiz_answerCorrect {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}
.learndash-wrapper .wpProQuiz_questionListItem.is-incorrect,
.learndash-wrapper .wpProQuiz_answerIncorrect {
  border-color: var(--color-error, #c23b22);
  background: #fdecec;
}

/* WPProQuiz toggles the per-answer "Correct / Incorrect / Correct answer"
   feedback labels via JS — but they were leaking through visually before
   the user submitted. Hide by default, only show once the answer list is
   marked as checked (`.wpProQuiz_questionListItem` carries the state class
   after submit). */
.cc-quiz-card .wpProQuiz_response,
.cc-quiz-card .wpProQuiz_correct,
.cc-quiz-card .wpProQuiz_incorrect { display: none; }
.cc-quiz-card .wpProQuiz_questionListItem.is-correct .wpProQuiz_correct,
.cc-quiz-card .wpProQuiz_questionListItem.is-incorrect .wpProQuiz_incorrect,
.cc-quiz-card .wpProQuiz_response.show { display: block; }

/* Essay / free-answer questions — LD renders a <textarea> inside the
   question card. Without explicit styling it inherits the default
   browser look (tiny, no border) and visually disappears next to our
   styled question chrome. Plus the surrounding `.wpProQuiz_questionList`
   uses `display: flex; flex-direction: column` (set above for radio
   answers) which can squash an unstyled textarea. Force a usable size +
   chrome that matches the rest of the form inputs. */
.cc-quiz-card textarea,
.learndash-wrapper .wpProQuiz_questionList textarea,
.learndash-wrapper .wpProQuiz_questionListItem textarea {
  display: block;
  width: 100%;
  min-height: 9rem;
  /* Roomier inner padding (was var(--space-md), ~16px) — Nick called the
     placeholder + cursor sitting flush with the border claustrophobic
     in May 2026 testing. 1.25rem gives a ~20px breathing margin on all
     four sides which matches the Phase 1 form input spacing. */
  padding: 1.25rem;
  /* Top gap from the prompt is fine at space-sm, but we want space-md
     below the textarea so LD's auto-graded "your response will be
     reviewed" caption doesn't sit right under the bottom border. */
  margin: var(--space-sm) 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  box-sizing: border-box;
}
.cc-quiz-card textarea:focus,
.learndash-wrapper .wpProQuiz_questionList textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 136, 172, 0.15);
  outline: none;
}

/* WordPress core's `.screen-reader-text` accessibility helper — visually
   hidden but available to assistive tech. Our base.css ships `.sr-only`
   but LD's templates use the WP-canonical class name, so without this
   rule the screen-reader strings ("Show Question 1", etc.) leak into
   the page. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Question-review nav (the "Show Question 1, 2, 3, 4" cell strip).
   Replace WPProQuiz's default cramped 30px floating cells with proper
   chips. Default WPProQuiz CSS targets `.wpProQuiz_reviewQuestion li`
   which the LD30 partial still emits alongside `.learndash-quiz-review`
   — override both. */
.cc-quiz-card .wpProQuiz_reviewQuestion,
.cc-quiz-card .learndash-quiz-review {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--space-md);
  max-height: none !important;
  overflow: visible !important;
}
.cc-quiz-card .wpProQuiz_reviewQuestion ol,
.cc-quiz-card .learndash-quiz-review__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-quiz-card .wpProQuiz_reviewQuestion li,
.cc-quiz-card .learndash-quiz-review__item {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: auto;
  float: none;
  text-align: center;
  list-style: none;
}
.cc-quiz-card .wpProQuiz_reviewQuestion li button,
.cc-quiz-card .learndash-quiz-review__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
/* Subtle keyboard-only focus ring — clicking with the mouse leaves no
   stray square outline around the active number. */
.cc-quiz-card .wpProQuiz_reviewQuestion li button:focus,
.cc-quiz-card .learndash-quiz-review__button:focus { outline: 0; box-shadow: none; }
.cc-quiz-card .wpProQuiz_reviewQuestion li button:focus-visible,
.cc-quiz-card .learndash-quiz-review__button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.cc-quiz-card .wpProQuiz_reviewQuestion li button:hover,
.cc-quiz-card .learndash-quiz-review__button:hover,
.cc-quiz-card .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionTarget button,
.cc-quiz-card .learndash-quiz-review__item--current .learndash-quiz-review__button {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  box-shadow: none;
  font-weight: var(--weight-bold);
}
.cc-quiz-card .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionSolved button,
.cc-quiz-card .learndash-quiz-review__item--answered .learndash-quiz-review__button {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-bg-white);
}
.cc-quiz-card .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionReview button,
.cc-quiz-card .learndash-quiz-review__item--review .learndash-quiz-review__button {
  background: #ffb800;
  border-color: #ffb800;
  color: var(--color-text-heading);
}

/* Legend — small swatches under the cell strip. */
.cc-quiz-card .wpProQuiz_reviewLegend {
  margin-top: var(--space-xs);
  font-size: var(--text-eyebrow);
  color: var(--color-text-muted);
}
.cc-quiz-card .wpProQuiz_reviewLegend ol { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cc-quiz-card .wpProQuiz_reviewLegend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.cc-quiz-card .wpProQuiz_reviewColor { width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; }

/* "Review Question" pill button — secondary style. */
.cc-quiz-card .wpProQuiz_button2 {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.125rem;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-text-heading);
  box-shadow: none;
  margin-top: var(--space-xs);
}
.cc-quiz-card .wpProQuiz_button2:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

/* WPProQuiz primary buttons (Start Quiz / Restart / Check / Next / View Q)
   styled to match Figma's primary CTA. */
.learndash-wrapper input.wpProQuiz_button,
.learndash-wrapper input.wpProQuiz_QuestionButton,
.cc-quiz-card .wpProQuiz_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-body-featured);
  font-weight: var(--weight-semibold);
  color: var(--color-text-white);
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.875rem 2rem;
  height: auto;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}
.learndash-wrapper input.wpProQuiz_button:hover,
.learndash-wrapper input.wpProQuiz_QuestionButton:hover {
  background: var(--color-primary-darkest);
  transform: translateY(-1px);
}

/* Progress bar */
.learndash-wrapper .wpProQuiz_progress {
  background: var(--color-border);
  height: 0.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.learndash-wrapper .wpProQuiz_progress > div {
  background: var(--color-primary-dark);
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Results panel — positioned inside our state card, styled to match the
   Figma pass/fail state cards (centered text, large icon area can sit
   above via `.cc-quiz-card--pass::before` accent bar). */
.learndash-wrapper .wpProQuiz_results,
.learndash-wrapper .wpProQuiz_sending {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: var(--space-md);
  text-align: center;
}
.learndash-wrapper .wpProQuiz_results h4,
.learndash-wrapper .wpProQuiz_sending .wpProQuiz_header {
  font-family: var(--font-heading);
  font-size: var(--text-h2-alt);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-sm);
}

/* "Sending" / "Recording your results" loading state. WPProQuiz
   ships this as a tiny `<h4>Results</h4>` + plain text + an inert
   grey progress bar — visually a non-event after the quiz pomp.
   We give it the same heading weight as the real results screen,
   centre the message, swap the static progress strip for an
   animated ring spinner, and pulse the message text so the user
   has a clear "something is happening" cue. The two motions run
   on slightly different timings so they don't lock-step. */
.learndash-wrapper .wpProQuiz_sending p {
  /* The plugin wraps the loading message in a `<p>` that contains
     `<div>`s — invalid HTML, so the browser auto-closes the `<p>`
     and the divs become siblings of an empty `<p>`. We style the
     text via a flatter selector below. This rule resets the
     accidental empty `<p>` so it doesn't add stray vertical space. */
  margin: 0;
}
.learndash-wrapper .wpProQuiz_sending {
  /* Vertical breathing room around the heading + spinner stack. */
  padding: var(--space-md) 0 var(--space-lg);
}
.learndash-wrapper .wpProQuiz_sending div {
  /* The message text + (hidden) progress bar live inside two
     sibling `<div>`s. Centre the message text and gently pulse it.
     The `:not(.course_progress)` skip keeps the pulse off the
     hidden progress strip so we don't waste cycles animating
     something the user can't see. */
  font-size: var(--text-body-featured);
  font-weight: var(--weight-medium);
  color: var(--color-text-body);
}
.learndash-wrapper .wpProQuiz_sending div:not(.course_progress) {
  animation: cc-quiz-pulse 1.4s ease-in-out infinite;
}

/* The progress bar drives the sending → results transition: WP-
   ProQuiz polls its `.width()` every 300ms and only calls
   `showResults()` once the bar reaches 100%. Using `display: none`
   here makes jQuery's `.width()` return 0 and the transition never
   fires (learner is stuck on the loading screen forever). Keep the
   bar rendered with non-zero dimensions so the width math works,
   but hide it visually with `opacity: 0` — the spinner above is
   doing the user-facing "in progress" job. */
.learndash-wrapper .wpProQuiz_sending .course_progress {
  display: block;
  opacity: 0;
  pointer-events: none;
  height: 4px;
  width: 60%;
  margin: var(--space-sm) auto 0;
}
.learndash-wrapper .wpProQuiz_sending .sending_progress_bar {
  display: block;
  height: 100%;
}

/* Ring spinner inserted via `::after` so we leave WPProQuiz's
   markup alone. 2.5rem ring, primary-dark on a subtle light track. */
.learndash-wrapper .wpProQuiz_sending::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: var(--space-md) auto 0;
  border: 3px solid rgba(0, 76, 114, 0.15);
  border-top-color: var(--color-primary-dark);
  border-radius: 50%;
  animation: cc-quiz-spin 0.8s linear infinite;
}
@keyframes cc-quiz-spin {
  to { transform: rotate(360deg); }
}
@keyframes cc-quiz-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
/* Honour reduced-motion preferences — drop the spinner to a slow
   crawl and disable the text pulse entirely. */
@media (prefers-reduced-motion: reduce) {
  .learndash-wrapper .wpProQuiz_sending::after { animation-duration: 4s; }
  .learndash-wrapper .wpProQuiz_sending div:not(.course_progress) { animation: none; }
}

/* Score / time / points lines — small centered stat block. The
   "X of Y answered correctly" line gets a featured weight; the rest are
   muted. */
.cc-quiz-card .wpProQuiz_results > p {
  margin: 0.25rem 0;
  font-size: var(--text-body);
  color: var(--color-text-body);
}
.cc-quiz-card .wpProQuiz_results > p:first-of-type {
  font-size: var(--text-body-featured);
  font-weight: var(--weight-medium);
  color: var(--color-text-heading);
}
.cc-quiz-card .wpProQuiz_quiz_time { color: var(--color-text-muted); }
.cc-quiz-card .wpProQuiz_correct_answer { color: var(--color-primary-dark); font-weight: var(--weight-bold); }
.cc-quiz-card .wpProQuiz_points { font-weight: var(--weight-medium); }

/* Action buttons row — Restart + View Questions, with the Continue link
   wrapped below them on its own line. Continue uses `order: 99` +
   `flex-basis: 100%` to break onto a new row centred under the pair.
   View Questions becomes secondary so there's a clear primary action. */
.cc-quiz-card .ld-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-md) 0 var(--space-lg) !important;
}
.cc-quiz-card .ld-quiz-actions .quiz_continue_link {
  order: 99;
  flex-basis: 100%;
  text-align: center;
  margin-top: 0.5rem;
}
.cc-quiz-card .quiz_continue_link a,
.cc-quiz-card #quiz_continue_link {
  display: inline-block;
  color: var(--color-primary-dark);
  text-decoration: underline;
  font-weight: var(--weight-medium);
}
.cc-quiz-card input.wpProQuiz_button_reShowQuestion {
  background: var(--color-bg-white);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-dark);
}

/* LearnDash 5.x ships an aggressive `background-color: #235af3; opacity: .75`
   hover rule on the action buttons + continue link from its plugin CSS
   (specificity wins over our brand rules). Override with !important so
   Restart / View / Continue stay on-brand on hover.
     - Restart Quiz (primary):   primary-darkest fill (matches primary
                                 button hover everywhere else)
     - View Questions (secondary): invert to primary-dark fill + white text
     - Continue link:            stay primary-dark, no opacity dim */
.cc-quiz-card .learndash-wrapper input.wpProQuiz_button_restartQuiz:hover {
  background-color: var(--color-primary-darkest) !important;
  color: var(--color-bg-white) !important;
  opacity: 1 !important;
}
.cc-quiz-card .learndash-wrapper input.wpProQuiz_button_reShowQuestion:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-bg-white) !important;
  border-color: var(--color-primary-dark) !important;
  opacity: 1 !important;
}
.cc-quiz-card .learndash-wrapper a#quiz_continue_link:hover,
.cc-quiz-card .quiz_continue_link a:hover,
.cc-quiz-card a#quiz_continue_link:hover {
  background-color: transparent !important;
  color: var(--color-primary-darkest) !important;
  opacity: 1 !important;
}

/* Per-question feedback panel (View Questions screen). Rounded card with
   the status word as an uppercase eyebrow tag and the explanation copy
   below. Tint the card pink when the incorrect feedback is showing —
   detected via WPProQuiz's inline `style="display: block"` on the
   `.wpProQuiz_incorrect` child. No left-edge bar; the badge + bg colour
   carry the state cue. */
.cc-quiz-card .wpProQuiz_response {
  margin: 1rem 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
}
.cc-quiz-card .wpProQuiz_response:has(.wpProQuiz_incorrect[style*="block"]) {
  background: #fdecec;
  border-color: rgba(194, 59, 34, 0.2);
}
.cc-quiz-card .wpProQuiz_correct,
.cc-quiz-card .wpProQuiz_incorrect {
  position: relative;
}
.cc-quiz-card .wpProQuiz_correct > span:first-child,
.cc-quiz-card .wpProQuiz_incorrect > span:first-child {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.4;
}
.cc-quiz-card .wpProQuiz_correct > span:first-child {
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
}
/* Pill bg uses a slightly more saturated pink than the surrounding
   `.wpProQuiz_response` card (which is `#fdecec`). With both at the
   same `#fdecec` the pill blended invisibly into the card. The
   `rgba(194, 59, 34, 0.18)` keeps it on-brand with the error colour
   and gives roughly the same value-step that the correct pill has
   against its `--color-bg-alt` card. */
.cc-quiz-card .wpProQuiz_incorrect > span:first-child {
  color: var(--color-error, #c23b22);
  background: rgba(194, 59, 34, 0.18);
}
.cc-quiz-card .wpProQuiz_AnswerMessage {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}
.cc-quiz-card .wpProQuiz_AnswerMessage p { margin: 0.5rem 0 0; }
.cc-quiz-card .wpProQuiz_AnswerMessage p:first-child { margin-top: 0; }
.cc-quiz-card .wpProQuiz_AnswerMessage em { color: var(--color-text-muted); font-size: var(--text-small); }

/* ---------------------------------------------------------------------------
   Quiz results: Carnaby designed Pass / Fail states (Figma 326:3659).
   The native LD result body (`.cc-quiz-native-results`) is kept in DOM
   for WPProQuiz JS to populate score values into; we hide it visually
   and render our own state cards above. Reveal / score-write logic
   lives in `cc_quiz_result_init()` (inc/learndash.php).
   --------------------------------------------------------------------------- */
.cc-quiz-card .cc-quiz-native-results { display: none; }

.cc-quiz-result {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-md);
}
.cc-quiz-result[hidden] { display: none; }

.cc-quiz-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}
.cc-quiz-result__icon--pass {
  background: rgba(76, 161, 100, 0.14);
  color: #2e7c47;
}
.cc-quiz-result__icon--fail {
  background: rgba(194, 59, 34, 0.14);
  color: var(--color-primary-dark);
  color: #c23b22;
}
/* Neutral icon for the knowledge-check completion state. Brand
   primary on a tinted background — same visual weight as the
   pass/fail icons but no judgmental colour. */
.cc-quiz-result__icon--neutral {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.cc-quiz-result__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-md);
  color: #2e7c47;
}
.cc-quiz-result__title--fail { color: #c23b22; }
.cc-quiz-result__title--neutral { color: var(--color-text-heading); }

.cc-quiz-result__message {
  max-width: 36rem;
  margin: 0 auto var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-body);
  line-height: var(--leading-body);
}
.cc-quiz-result__sub {
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.cc-quiz-result__score { font-weight: var(--weight-semibold); }

.cc-quiz-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Action buttons. Primary mirrors `.wpProQuiz_button` (filled, full
   radius, dark primary). Secondary is an outlined variant. */
.cc-quiz-result__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-body-featured);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.cc-quiz-result__btn--primary {
  background: var(--color-primary-dark);
  color: var(--color-text-white);
  border-color: var(--color-primary-dark);
}
.cc-quiz-result__btn--primary:hover,
.cc-quiz-result__btn--primary:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}
.cc-quiz-result__btn--secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.cc-quiz-result__btn--secondary:hover,
.cc-quiz-result__btn--secondary:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-text-white);
}

/* Quiz nav row sits flush after the card; just a single back-link. */
.cc-ld-nav--quiz {
  justify-content: flex-start;
  border-top: 0;
  padding-top: var(--space-md);
}
.cc-ld-nav--quiz .cc-ld-nav-link svg { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------------------
   9. Single course page — Figma 326:2701
   --------------------------------------------------------------------------- */

/* Header band: 2-column grid (title block + sticky purchase rail). Sits
   directly under the breadcrumb. Sections that follow are full-width. */
.cc-single-course {
  max-width: var(--size-container-max);
  margin: 0 auto;
  padding: var(--space-section-y-sm) var(--space-container);
  display: grid;
  grid-template-columns: 1fr 22.5rem; /* 360px purchase rail */
  gap: var(--space-content-gap);
  align-items: start;
}
.cc-single-course__main h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-md);
}
.cc-single-course__lede {
  font-size: var(--text-body-lg);
  color: var(--color-text-body);
  line-height: var(--leading-body);
  margin-bottom: var(--space-lg);
}
.cc-single-course__lede p { margin-bottom: var(--space-sm); }
.cc-single-course__lede p:last-child { margin-bottom: 0; }

/* CPD badge pill — Figma: light blue bg, primary-dark text, rounded full. */
.course-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  width: fit-content;
  margin-bottom: var(--space-sm);
}
.course-badge svg { color: var(--color-primary-dark); }

/* Meta bar — flex inline with primary-coloured icons. */
.course-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}
.course-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.course-meta-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Purchase / enrolment rail. Sticky to viewport, NOT full-page tall. */
.cc-course-purchase {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.236rem + 1.127vw, 2.25rem);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: calc(var(--size-nav-h) + 1rem);
  align-self: start;       /* don't stretch to row height */
  height: fit-content;     /* explicit short-circuit if grid wants to stretch */
}
.cc-course-purchase__price {
  font-size: var(--text-price);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-xs);
  line-height: 1.1;
}
.cc-course-purchase__price-suffix {
  margin-left: 0.375rem;
  font-size: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  vertical-align: baseline;
}
.cc-course-purchase__price-meta {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.cc-course-purchase__cta { width: 100%; }
.cc-course-purchase__bulk {
  display: block;
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}
.cc-course-purchase__bulk:hover { color: var(--color-primary-darkest); }

@media (max-width: 60rem) {
  .cc-single-course { grid-template-columns: 1fr; }
  .cc-course-purchase { position: static; }
}

/* What You'll Learn — full-width banded section, 2-column list */
.learn-section {
  background: var(--color-bg-alt);
  padding: var(--space-section-y) 0;
}
.learn-section .section-title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-alt);
  color: var(--color-text-heading);
  margin-bottom: var(--space-lg);
  letter-spacing: var(--tracking-heading-sm);
}
.learn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
}
@media (max-width: 60rem) {
  .learn-list { grid-template-columns: 1fr; }
}
.learn-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-body-featured);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
}
.learn-list .check-icon {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--color-primary-tint);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  margin-top: 0.125rem;
}
.learn-list .check-icon svg { width: 0.75rem; height: 0.75rem; }

/* Course Content — full-width, sectioned accordion */
.cc-course-content {
  background: var(--color-bg-white);
  padding: var(--space-section-y) 0;
}
.cc-course-content .section-title {
  font-size: var(--text-h2-alt);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: var(--space-xs);
}
.cc-course-content__meta {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* Outline accordion — sections (Introduction, Characteristics, etc.) */
.cc-course-outline {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-white);
}
.cc-course-outline__section {
  border-bottom: 1px solid var(--color-border);
}
.cc-course-outline__section:last-child { border-bottom: none; }

.cc-course-outline__summary {
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-input);  /* #fafafa per Figma */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  color: var(--color-text-heading);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cc-course-outline__summary::-webkit-details-marker { display: none; }
.cc-course-outline__summary:hover { background: var(--color-bg-alt); }
.cc-course-outline__summary:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: -2px;
}

/* Chevron on LEFT, primary color, rotates when open. */
.cc-course-outline__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}
.cc-course-outline__section[open] .cc-course-outline__chevron {
  transform: rotate(180deg);
}

.cc-course-outline__title { flex: 1; }

/* Lesson rows inside an open section — white background per Figma. */
.cc-course-outline__lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-bg-white);
}
.cc-course-outline__lesson-row {
  border-top: 1px solid var(--color-border);
}
.cc-course-outline__lesson-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-body-featured);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cc-course-outline__lesson-link:hover,
.cc-course-outline__lesson-link:focus-visible {
  background: var(--color-bg-alt);
  outline: none;
}
.cc-course-outline__lesson-link:hover .cc-course-outline__lesson-title,
.cc-course-outline__lesson-link:focus-visible .cc-course-outline__lesson-title {
  color: var(--color-primary-dark);
}
/* Locked rows — rendered as <span> when the visitor isn't enrolled.
   The outline stays visible (so they can preview what's in the course
   before purchasing) but rows aren't interactive — clicking previously
   reloaded the same course page, which read as broken. */
.cc-course-outline__lesson-link.is-locked,
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link.is-locked {
  cursor: default;
}
.cc-course-outline__lesson-link.is-locked:hover,
.cc-course-outline__lesson-link.is-locked:focus-visible {
  background: transparent;
}
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link.is-locked,
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link.is-locked:hover,
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link.is-locked:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.cc-course-outline__lesson-link.is-locked:hover .cc-course-outline__lesson-title,
.cc-course-outline__lesson-link.is-locked:focus-visible .cc-course-outline__lesson-title {
  color: var(--color-text-heading);
}
.cc-course-outline__lesson-title {
  color: var(--color-text-heading);
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast);
}
.cc-course-outline__lesson-meta {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  text-align: right;
  flex-shrink: 0;
}

/* Quiz rows in the outline — half the height of a lesson row. They sit
   tucked under their parent lesson (indented + tinted) so the eye still
   reads "this quiz belongs to that lesson" without dominating the table. */
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link {
  background: var(--color-bg-alt);
  padding: 0.5rem var(--space-lg) 0.5rem calc(var(--space-lg) + 1.25rem);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link:hover,
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-link:focus-visible {
  background: var(--color-bg-white);
  color: var(--color-text-heading);
}
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-title {
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cc-course-outline__lesson-row--quiz .cc-course-outline__lesson-meta {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.cc-course-outline__quiz-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-bg-white);
  flex-shrink: 0;
}
.cc-course-outline__quiz-tag svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Reviews and Testimonials — banded section to mirror "What You'll Learn". */
.cc-course-reviews {
  background: var(--color-bg-alt);
  padding: var(--space-section-y) 0;
}
.cc-course-reviews .section-title {
  font-size: var(--text-h2-alt);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: var(--space-md);
}

/* Related Courses — white-background section */
.cc-course-related {
  background: var(--color-bg-white);
  padding: var(--space-section-y) 0;
}
.cc-course-related .section-title {
  font-size: var(--text-h2-alt);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: var(--space-md);
}

/* Shared empty-state card used by Reviews and Related sections when the
   client hasn't added testimonials/related courses yet. Matches the
   "appear here" / "displayed here as the catalogue grows" placeholders
   in the Figma course detail (326:2701). */
.cc-empty-state {
  background: var(--color-bg-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}
.cc-empty-state p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

/* ---------------------------------------------------------------------------
   10. Course archive (replaces template-browse-courses.php placeholder)
   Course cards reuse the existing .course-card components from courses.css —
   we only need to ensure LD's archive markup is unwrapped.
   --------------------------------------------------------------------------- */

.learndash-wrapper.cc-archive .ld-course-list-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-card-gap);
}
.learndash-wrapper.cc-archive .ld-course-list-items > * {
  background: transparent;
  padding: 0;
  border: none;
}

/* ---------------------------------------------------------------------------
   11. Account / Login / Register — Figma 332:4406
   --------------------------------------------------------------------------- */

.cc-account {
  background: var(--color-bg-alt);
  padding: var(--space-section-y) 0;
  min-height: 60vh;
}
.cc-account__container {
  max-width: 40rem;  /* ~640px — 25% wider than before */
}

.cc-account__card {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Tabs sit flush at the top of the card. Inactive tab has a tinted
   background, active tab is white. The active tab gets a primary-dark
   underline beneath its label per the Figma. */
.cc-account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cc-account-tabs__tab {
  position: relative;
  display: block;
  text-align: center;
  padding: var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  background: var(--color-bg-input);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-base), background var(--transition-base);
}
.cc-account-tabs__tab:hover { color: var(--color-primary-dark); }
.cc-account-tabs__tab[aria-selected="true"] {
  color: var(--color-primary-dark);
  background: var(--color-bg-white);
  border-bottom-color: transparent;
}

.cc-account__pane {
  padding: var(--space-lg);
  text-align: left;
}
.cc-account__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-featured);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.cc-account__pane h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-alt);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}
.cc-account__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  margin-bottom: var(--space-lg);
}

/* Login form — wp_login_form() output. Inputs sized to match the contact
   form (gravity-forms.css) so both forms feel identical. */
.cc-account__pane #cc-loginform {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}
.cc-account__pane #cc-loginform p { margin: 0; }
.cc-account__pane #cc-loginform label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-heading);
  margin-bottom: 0.375rem;
}
.cc-account__pane #cc-loginform input[type="text"],
.cc-account__pane #cc-loginform input[type="email"],
.cc-account__pane #cc-loginform input[type="password"] {
  width: 100%;
  padding: 0 1rem;
  height: 3rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-body);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.cc-account__pane #cc-loginform input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 136, 172, 0.15);
}
.cc-account__pane #cc-loginform .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--weight-regular);
  color: var(--color-text-body);
  margin: 0;
  cursor: pointer;
}
.cc-account__pane #cc-loginform .login-remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--color-text-faint);
  border-radius: 0.25rem;
  background: var(--color-bg-white);
  cursor: pointer;
  position: relative;
}
.cc-account__pane #cc-loginform .login-remember input[type="checkbox"]:checked {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.cc-account__pane #cc-loginform .login-remember input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--color-text-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Submit button — covers <input type="submit"> (legacy wp_login_form
   output) AND <button type="submit"> / <button class="ld-button">
   (custom form output now that wp-login.php is 403-blocked on this host). */
.cc-account__pane #cc-loginform input[type="submit"],
.cc-account__pane #cc-loginform button[type="submit"],
.cc-account__pane #cc-loginform .ld-button,
.cc-account__pane #cc-loginform .cc-account__submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-white);
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-full);
  height: var(--size-btn-h);
  padding: 0 var(--space-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.cc-account__pane #cc-loginform input[type="submit"]:hover,
.cc-account__pane #cc-loginform button[type="submit"]:hover,
.cc-account__pane #cc-loginform .ld-button:hover,
.cc-account__pane #cc-loginform .cc-account__submit:hover {
  background: var(--color-primary-darkest);
  transform: translateY(-1px);
  color: var(--color-text-white);
}

.cc-account__forgot {
  margin-top: var(--space-sm);
  text-align: center;
}
.cc-account__forgot a {
  color: var(--color-primary-dark);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-base);
}
.cc-account__forgot a:hover { color: var(--color-primary-darkest); text-decoration: underline; }

.cc-account__bulk {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  text-align: center;
  text-wrap: balance;
}
.cc-account__bulk a {
  color: var(--color-primary-dark);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-account__bulk a:hover { color: var(--color-primary-darkest); }

.cc-account__notice {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  text-align: left;
  margin-bottom: var(--space-md);
}
.cc-account__notice p { margin: 0; }
.cc-account__notice p + p { margin-top: 0.5rem; }
/* Variants used by the forgot / reset password flow.
   --success: confirmation states (email sent, password updated)
   --error:   validation failures (mismatch, short, invalid key) */
.cc-account__notice--success {
  background: var(--color-primary-tint);
  border-color: var(--color-primary);
  color: var(--color-primary-darkest);
}
.cc-account__notice--error {
  background: #fdecea;
  border-color: #f5b3ab;
  color: #8a1f17;
}

/* Forgot / reset password forms. Reuse the login form's input + label
   styling (already scoped to `.cc-account__pane #cc-loginform`) by
   matching the same selectors here. The `.ld-button` submit picks up
   our global button system. */
.cc-account__pane #cc-forgotform,
.cc-account__pane #cc-resetform {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cc-account__pane #cc-forgotform p,
.cc-account__pane #cc-resetform p { margin: 0; }
.cc-account__pane #cc-forgotform label,
.cc-account__pane #cc-resetform label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
}
.cc-account__pane #cc-forgotform input[type="email"],
.cc-account__pane #cc-resetform input[type="password"] {
  width: 100%;
  padding: 0 1rem;
  height: var(--size-btn-h);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cc-account__pane #cc-forgotform input:focus,
.cc-account__pane #cc-resetform input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 136, 172, 0.15);
  outline: none;
}
/* Password requirements + match indicator. Shared between the reset
   form (template-account.php) and the change-password form
   (template-my-profile.php). The `.cc-pass-req` list shows up below
   the new-password field and each item toggles `.is-met` as the user
   satisfies it. The match indicator (.cc-pass-match) appears below
   the confirm field and toggles `.is-match` / `.is-mismatch`.
   When any requirement is unmet, the submit button is disabled via
   the `disabled` attribute, which already inherits the `is-locked`
   visual styling further down. */
.cc-pass-req {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  display: grid;
  gap: 0.25rem;
}
.cc-pass-req li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}
.cc-pass-req li::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  background-image: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cc-pass-req li.is-met {
  color: var(--color-text-heading);
}
.cc-pass-req li.is-met::before {
  background: var(--color-accent-green-bg);
  border-color: var(--color-accent-green-bg);
  /* tick mark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.7rem 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}
.cc-pass-match {
  margin: 0.5rem 0 0;
  font-size: var(--text-body-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.25rem;
  line-height: 1.3;
}
.cc-pass-match.is-match { color: #1a7a4b; }
.cc-pass-match.is-mismatch { color: #c84444; }
.cc-pass-match::before {
  content: '';
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: none;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.7rem 0.7rem;
}
.cc-pass-match.is-match::before,
.cc-pass-match.is-mismatch::before { display: inline-block; }
.cc-pass-match.is-match::before {
  background-color: var(--color-accent-green-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cc-pass-match.is-mismatch::before {
  background-color: #fdecec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c84444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Disabled submit while the requirements aren't met. Same look as the
   `is-locked` ld-button so it reads as "not yet" rather than "broken". */
.cc-account__pane button[type="submit"]:disabled,
.cc-account-page button[type="submit"]:disabled {
  background: var(--color-bg-alt) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed;
  transform: none !important;
  border: 1px dashed var(--color-border) !important;
}

/* ===========================================================================
   Gravity Forms password field polish (forms 5 + 6).

   GF's stock layout puts the eye-icon visibility toggle button *outside*
   the input on the right, eating horizontal space. Reposition it inside
   the input so it overlays the trailing edge — matches how every modern
   auth form looks. Also colour-code GF's "Strength: Very weak / Weak /
   Medium / Strong / Mismatch" indicator so the level reads at a glance.
   =========================================================================== */

/* Container becomes the positioning context for the eye toggle. */
.gform_wrapper .password_input_container {
  position: relative;
  display: block;
}
/* Make room on the right of the input so the eye icon doesn't overlap
   typed text. 2.5rem matches the icon size + padding. */
.gform_wrapper .password_input_container input[type="password"],
.gform_wrapper .password_input_container input[type="text"] {
  padding-right: 2.75rem;
}
/* The actual button — strip GF's default chrome and float it inside. */
.gform_wrapper .password_input_container .gform_show_password {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.375rem;
  margin: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  height: auto;
  width: auto;
  min-width: 0;
  line-height: 1;
}
.gform_wrapper .password_input_container .gform_show_password:hover,
.gform_wrapper .password_input_container .gform_show_password:focus-visible {
  color: var(--color-primary-dark);
  background: var(--color-bg-alt);
  outline: none;
}
.gform_wrapper .password_input_container .gform_show_password .dashicons {
  font-size: 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
}

/* GF's strength indicator gets a status class added to it via JS:
   `short` (Very weak), `bad` (Weak), `good` (Medium), `strong`,
   `mismatch`. Colour each so the level is unmistakable.

   The indicator sits in `#input_X_X_strength_indicator.gfield_password_strength`,
   contains text only — no badge needed, just colour the text. */
.gform_wrapper .gfield_password_strength {
  margin-top: 0.5rem;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.gform_wrapper .gfield_password_strength.short    { color: #c84444; } /* Very weak — red    */
.gform_wrapper .gfield_password_strength.bad      { color: #d97706; } /* Weak      — orange */
.gform_wrapper .gfield_password_strength.good     { color: #b45309; } /* Medium    — amber  */
.gform_wrapper .gfield_password_strength.strong   { color: #1a7a4b; } /* Strong    — green  */
.gform_wrapper .gfield_password_strength.short::before  { content: '⚠ '; }
.gform_wrapper .gfield_password_strength.bad::before    { content: '⚠ '; }
.gform_wrapper .gfield_password_strength.strong::before { content: '✓ '; }
/* GF flips to "Mismatch" on every keystroke that doesn't yet match — way
   too eager. Hide GF's mismatch state entirely; our injected
   `.cc-pass-match` indicator (added via JS in inc/learndash.php) only
   shows once the confirm field has at least the same length as the
   primary, so the warning only appears when the user has actually
   finished typing. */
.gform_wrapper .gfield_password_strength.mismatch { display: none; }

/* Requirements checklist injected after GF password fields on forms 5 + 6
   by the script in `inc/learndash.php`. Reuses the `.cc-pass-req` styling
   from the custom forms above; this rule just tightens the spacing so it
   sits flush under the GF strength indicator without an extra gap. */
.gform_wrapper .gfield--type-password + .cc-pass-req,
.gform_wrapper .gfield_password_strength + .cc-pass-req {
  margin-top: 0.5rem;
}
.gform_wrapper .cc-pass-req {
  margin: 0.5rem 0 0;
}

/* Forgot / reset password submit buttons — same full styling as the
   login button. Outside `.learndash-wrapper` the base `.ld-button`
   rules don't apply, so we have to repaint the chrome here. */
.cc-account__pane #cc-forgotform .ld-button,
.cc-account__pane #cc-forgotform button[type="submit"],
.cc-account__pane #cc-resetform .ld-button,
.cc-account__pane #cc-resetform button[type="submit"] {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-white);
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-full);
  height: var(--size-btn-h);
  padding: 0 var(--space-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.cc-account__pane #cc-forgotform .ld-button:hover,
.cc-account__pane #cc-forgotform button[type="submit"]:hover,
.cc-account__pane #cc-resetform .ld-button:hover,
.cc-account__pane #cc-resetform button[type="submit"]:hover {
  background: var(--color-primary-darkest);
  transform: translateY(-1px);
  color: var(--color-text-white);
}

/* Register tab uses the GF form — gravity-forms.css already styles inputs
   to match the contact form. We just need to nudge the layout so labels
   align and the form looks centred inside the card. */
.cc-account__pane .gform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  text-align: left;
}
.cc-account__pane .gform_wrapper .gform_fields {
  grid-template-columns: 1fr !important;  /* always single-column inside the card */
  gap: var(--space-md) !important;
}

/* Reset browser-default fieldset borders on Password (complex) and
   Consent fields. Without this, GF's <fieldset> wrappers render with the
   ugly grooved/threedface user-agent border. */
.cc-account__pane .gform_wrapper fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-inline-size: 0 !important;
}
.cc-account__pane .gform_wrapper legend {
  padding: 0 !important;
}

/* Match Figma exactly: 48px tall (~3rem) inputs with 6px radius (0.375rem).
   gravity-forms.css uses var(--size-btn-h) (44–56px) which renders too tall
   on wide screens — we force a fixed height inside this card. */
.cc-account__pane .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cc-account__pane .gform_wrapper textarea,
.cc-account__pane .gform_wrapper select {
  height: 3rem !important;
  border-radius: 0.375rem !important;
}
.cc-account__pane .gform_wrapper textarea {
  height: auto !important;
  min-height: 6rem !important;
}

/* Gravity Forms textarea resize handle.
   Phase 1's gravity-forms.css ships with `resize: none` on textareas
   to keep the contact / service forms a fixed shape — but Nick's
   May 2026 feedback called the missing drag-corner out as a usability
   bug (the LD knowledge-check textareas are resizable, so the contact
   form looks broken by comparison).

   Allow vertical resizing on every public-facing GF textarea so users
   can grow the box if they're typing a long message. `resize: vertical`
   keeps the layout stable horizontally (the form column has a fixed
   width via the parent theme grid). */
.gform_wrapper textarea {
  resize: vertical;
}

/* Consent field — Figma puts checkbox + "I agree to…" label on a single
   line with no visible "Terms agreement" legend. GF's default markup wraps
   them in a fieldset with the legend rendered as a heading; we hide the
   legend visually (still readable to AT) and flex the input + label. */
.cc-account__pane .gfield--type-consent legend.gfield_label,
.cc-account__pane .gfield_consent legend.gfield_label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cc-account__pane .ginput_container_consent {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cc-account__pane .ginput_container_consent input[type="checkbox"] {
  margin: 0 !important;
  flex-shrink: 0;
}
.cc-account__pane .ginput_container_consent label {
  margin: 0 !important;
  font-weight: var(--weight-regular) !important;
  font-size: var(--text-body) !important;
  color: var(--color-text-body) !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------------
   12. Learner area — My Courses / My Profile / My Certificates
   Figma 332:4829 (My Courses), 332:4980 (Profile), 332:5050 (Certificates).
   --------------------------------------------------------------------------- */

/* Top tab nav for the learner area (My Courses / My Profile / My Certificates).
   Class renamed from .cc-account-tabs to avoid colliding with the login/register
   page's own tab toggle (template-account.php uses .cc-account-tabs as a
   2-column grid). The bottom border spans the full viewport width while the
   tabs themselves stay inside the page container. */
.cc-learner-nav {
  border-bottom: 1px solid var(--color-border);
}
.cc-learner-nav .container {
  display: flex;
  gap: 0;
}
.cc-learner-nav__tab {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 0;
  margin-right: 1.5rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-featured);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.cc-learner-nav__tab:hover { color: var(--color-primary-dark); }
.cc-learner-nav__tab.is-active { color: var(--color-primary-dark); }
.cc-learner-nav__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 1.5rem;
  bottom: -1px;
  height: 3px;
  background: var(--color-primary-dark);
  border-radius: 2px 2px 0 0;
}

/* Page chrome — h1 + subtitle, centred container, then body. */
.cc-account-page {
  background: var(--color-bg-input);
  min-height: 60vh;
  padding-bottom: var(--space-section-y);
}
.cc-account-page__head {
  padding-top: var(--space-section-y-sm);
  padding-bottom: var(--space-md);
}
.cc-account-page__head h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h1);
  color: var(--color-text-heading);
  margin: 0 0 0.5rem;
  letter-spacing: -0.3px;
}
.cc-account-page__subtitle {
  margin: 0;
  font-size: var(--text-body-featured);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}
.cc-account-page__body { padding-top: var(--space-md); }

/* ---------------------------------------------------------------------------
   My Certificates listing — Figma 332:5050.
   --------------------------------------------------------------------------- */

.cc-cert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.cc-cert-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: stretch;
  transition: box-shadow var(--transition-base);
}
.cc-cert-card:hover { box-shadow: var(--shadow-card); }
.cc-cert-card__icon {
  background: var(--color-accent-green-bg);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.cc-cert-card__body {
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  justify-content: center;
}
.cc-cert-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-card);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-heading);
  margin: 0 0 0.25rem;
}
.cc-cert-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}
.cc-cert-card__meta svg { flex-shrink: 0; color: var(--color-text-muted); }
.cc-cert-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  padding: 0.375rem 0.875rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  align-self: flex-start;
}
.cc-cert-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  align-items: stretch;
  justify-content: center;
  min-width: 10rem;
}
.cc-cert-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-fast), transform var(--transition-fast);
}
.cc-cert-card__btn--primary {
  background: var(--color-primary-dark);
  color: var(--color-text-white);
  border: 0;
}
.cc-cert-card__btn--primary:hover {
  background: var(--color-primary-darkest);
  color: var(--color-text-white);
  transform: translateY(-1px);
}
.cc-cert-card__btn--ghost {
  background: var(--color-bg-white);
  color: var(--color-primary-dark);
  border: 2px solid var(--color-border);
}
.cc-cert-card__btn--ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

@media (max-width: 48rem) {
  .cc-cert-card {
    grid-template-columns: 5rem 1fr;
  }
  .cc-cert-card__icon { padding: var(--space-sm); }
  .cc-cert-card__icon svg { width: 32px; height: 32px; }
  .cc-cert-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    padding: 0 var(--space-md) var(--space-md);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
  }
  .cc-cert-card__actions .cc-cert-card__btn { flex: 1 0 0; }
}

/* Empty state — shown when learner has earned 0 certificates. */
.cc-cert-empty {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-section-y-sm) var(--space-lg);
  text-align: center;
  max-width: 35rem;
  margin: 0 auto;
}
.cc-cert-empty__icon {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}
.cc-cert-empty__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-sm);
}
.cc-cert-empty__body {
  margin: 0 auto var(--space-md);
  max-width: 26rem;
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}
.cc-cert-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-primary-dark);
  color: var(--color-text-white);
  padding: 0 var(--space-lg);
  height: var(--size-btn-h);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.cc-cert-empty__cta:hover {
  background: var(--color-primary-darkest);
  color: var(--color-text-white);
  transform: translateY(-1px);
}
.cc-account-page__signout {
  margin-top: var(--space-lg);
  text-align: center;
}
.cc-account-page__signout a {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.cc-account-page__signout a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Course card — horizontal card with tinted media block (status-coloured)
   on the left and content on the right. 4px primary top accent bar. */
.cc-mc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cc-mc-card {
  position: relative;
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.cc-mc-card:hover { box-shadow: var(--shadow-card); }
.cc-mc-card--completed { border-top-color: var(--color-accent-green, #1a7a4b); }
.cc-mc-card--not-started { border-top-color: var(--color-text-faint, #a6a8aa); }

.cc-mc-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  text-decoration: none;
  min-height: 14rem;
}
.cc-mc-card--completed .cc-mc-card__media {
  background: var(--color-accent-green-bg, #e8f5ee);
  color: var(--color-accent-green, #1a7a4b);
}
.cc-mc-card--not-started .cc-mc-card__media {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.cc-mc-card__body {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Status pill — Figma uses a coloured rounded badge with icon. */
.cc-mc-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
}
.cc-mc-card--completed .cc-mc-card__status {
  background: var(--color-accent-green-bg, #e8f5ee);
  color: var(--color-accent-green, #1a7a4b);
}
.cc-mc-card--not-started .cc-mc-card__status {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.cc-mc-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  margin: 0;
  line-height: 1.35;
}
.cc-mc-card__title a { color: inherit; text-decoration: none; }
.cc-mc-card__title a:hover { color: var(--color-primary-dark); }

.cc-mc-card__progress { margin: 0.25rem 0 0.5rem; }
.cc-mc-card__progress-label {
  display: block;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  margin-bottom: 0.5rem;
}
.cc-mc-card--completed .cc-progress-bar__fill {
  background: var(--color-accent-green, #1a7a4b);
}

.cc-mc-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: 0.25rem;
}
.cc-mc-card__cert {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-primary-dark);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.cc-mc-card__cert:hover { color: var(--color-primary-darkest); text-decoration: underline; }
.cc-mc-card__cert svg { color: var(--color-primary-dark); }

/* Empty state — solid-bordered white card with circle icon. Used when the
   user hasn't enrolled in any courses yet. */
.cc-mc-empty {
  max-width: 35rem;
  margin: var(--space-lg) auto;
  padding: var(--space-xl, 3rem) var(--space-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cc-mc-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-md);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  border-radius: 50%;
}
.cc-mc-empty h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3-lg);
  color: var(--color-text-heading);
  margin: 0 0 0.5rem;
}
.cc-mc-empty p {
  margin: 0 auto var(--space-md);
  max-width: 24rem;
  font-size: var(--text-body-featured);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

/* Progress bar — shared across card variants. */
.cc-progress-bar {
  background: var(--color-border);
  height: 0.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.cc-progress-bar__fill {
  background: var(--color-primary-dark);
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Mobile: collapse the card media to a slim banner above the body. */
@media (max-width: 48rem) {
  .cc-learner-nav .container { overflow-x: auto; }
  .cc-learner-nav__tab { padding: 1rem 1rem 1rem 0; margin-right: 1rem; }
  .cc-mc-card {
    grid-template-columns: 1fr;
  }
  .cc-mc-card__media {
    min-height: 6rem;
  }
}

/* ---- My Profile — Figma 332:4980 ---------------------------------------- */

/* Two-card grid (Profile Information / Change Password). */
.cc-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.cc-profile-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cc-profile-card__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3-lg);
  color: var(--color-text-heading);
  margin: 0 0 0.25rem;
}

.cc-profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cc-profile-field label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-heading);
}
.cc-profile-field__optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  margin-left: 0.25rem;
}
.cc-profile-field input {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-body);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.cc-profile-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 136, 172, 0.15);
}
.cc-profile-field input::placeholder { color: var(--color-text-faint, #a6a8aa); }

.cc-profile-card .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Account Actions — full-width card with red logout link. */
.cc-account-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); /* 16px per Figma */
}
.cc-account-actions__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-featured);
  color: var(--color-text-heading);
  margin: 0 0 0.125rem;
}
.cc-account-actions__description {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
}
.cc-account-actions__logout {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-error, #c23b22);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cc-account-actions__logout:hover {
  background: rgba(194, 59, 34, 0.08);
  color: var(--color-error-dark, #9a2616);
}

/* Flash messages — Figma uses subtle banded card style at top of body. */
.cc-profile-flash {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}
.cc-profile-flash--ok {
  background: var(--color-accent-green-bg, #e8f5ee);
  color: var(--color-accent-green, #1a7a4b);
  border: 1px solid var(--color-accent-green, #1a7a4b);
}
.cc-profile-flash--error {
  background: #fdecec;
  color: #9a2616;
  border: 1px solid #c23b22;
}

@media (max-width: 48rem) {
  .cc-profile-grid { grid-template-columns: 1fr; }
  .cc-account-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   13. Certificate (web preview — print uses a separate stylesheet)
   --------------------------------------------------------------------------- */

.cc-certificate-preview {
  max-width: 50rem;
  margin: var(--space-section-y-sm) auto;
  padding: var(--space-section-y-sm) var(--space-container);
  text-align: center;
}
.cc-certificate-preview__frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-section-y);
  box-shadow: var(--shadow-card);
  background: var(--color-bg-white);
}
.cc-certificate-preview__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ---------------------------------------------------------------------------
   11a. Global GF fieldset reset
   GF wraps complex fields (Name, Password+Confirm, Consent) in <fieldset>
   elements which otherwise pick up browser-default `border: 2px groove
   threedface` and grooved padding. Phase 1's gravity-forms.css resets
   `.gfield` but not the underlying fieldset itself. This kills the
   leaking borders on every page that renders a GF form.
   --------------------------------------------------------------------------- */

.gform_wrapper fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-inline-size: 0 !important;
}
.gform_wrapper legend {
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   12a. Course-page purchase gate + dedicated /checkout/ page
   --------------------------------------------------------------------------- */

/* Consent gate (shown on the course page in place of the GF form) */
.cc-purchase-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.cc-purchase-gate__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  cursor: pointer;
}
.cc-purchase-gate__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  border: 2px solid var(--color-text-faint);
  border-radius: 0.375rem;
  background: var(--color-bg-white);
  cursor: pointer;
  position: relative;
  margin-top: 0.125rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cc-purchase-gate__checkbox input[type="checkbox"]:hover { border-color: var(--color-primary); }
.cc-purchase-gate__checkbox input[type="checkbox"]:checked {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.cc-purchase-gate__checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--color-text-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cc-purchase-gate__checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.cc-purchase-gate__label a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-base);
}
.cc-purchase-gate__label a:hover { color: var(--color-primary-darkest); }

/* Submit button — muted when checkboxes incomplete (still clickable to fire
   the inline error message). */
.cc-purchase-gate__submit {
  margin-top: 0.5rem;
  width: 100%;
  transition: background var(--transition-base), opacity var(--transition-base), transform var(--transition-fast);
}
.cc-purchase-gate__submit.is-muted {
  background: var(--color-text-faint);
  opacity: 0.85;
}
.cc-purchase-gate__submit.is-muted:hover {
  background: var(--color-text-muted);
  transform: none;
}
.cc-purchase-gate__error {
  margin: 0.5rem 0 0;
  font-size: var(--text-body);
  color: #c84444;
  text-align: center;
}

/* Shake the form when user clicks "Enrol" without ticking both boxes. */
@keyframes cc-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.cc-purchase-gate.is-shaking { animation: cc-shake 0.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cc-purchase-gate.is-shaking { animation: none; }
}

/* Checkout page — two-column layout (form + summary) */
.cc-checkout {
  padding: var(--space-section-y-sm) 0 var(--space-section-y);
}
.cc-checkout__header {
  margin-bottom: var(--space-lg);
}
.cc-checkout__header h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}
.cc-checkout__header p {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
}
.cc-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 22.5rem;
  gap: var(--space-content-gap);
  align-items: start;
}
@media (max-width: 60rem) {
  .cc-checkout__grid { grid-template-columns: 1fr; }
  .cc-checkout__summary { order: -1; }
}
.cc-checkout__form {
  background: var(--color-bg-white);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cc-checkout__summary {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--color-bg-white);
  position: sticky;
  top: calc(var(--size-nav-h) + 1rem);
  align-self: start;
  height: fit-content;
}
.cc-checkout__summary-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-card);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-md);
}
.cc-checkout__thumb {
  margin: 0 0 var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.cc-checkout__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-checkout__course-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-lg);
  color: var(--color-text-heading);
  margin: var(--space-sm) 0 var(--space-md);
}
.cc-checkout__features {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.cc-checkout__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-body);
  color: var(--color-text-body);
}
.cc-checkout__features svg { color: var(--color-primary); flex-shrink: 0; }

.cc-checkout__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem var(--space-md);
  margin: var(--space-md) 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}
.cc-checkout__totals dt { margin: 0; }
.cc-checkout__totals dd { margin: 0; text-align: right; color: var(--color-text-heading); font-weight: var(--weight-medium); }
.cc-checkout__totals-grand {
  font-family: var(--font-heading);
  font-size: var(--text-h3-lg);
  color: var(--color-primary-dark) !important;
  font-weight: var(--weight-bold) !important;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem !important;
}

.cc-checkout__back {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--transition-base);
}
.cc-checkout__back:hover { color: var(--color-primary-darkest); }

.cc-checkout__error {
  background: #fdecec;
  border: 1px solid #c84444;
  color: #7a1a1a;
  padding: var(--space-md);
  border-radius: var(--radius-md);
}
/* Course-not-found / invalid ?course= state. Reuses the .cc-search-empty
   no-results card from search.php so the visual treatment is identical
   across the site (Figma "no results" pattern). */
.cc-checkout--error { background: var(--color-bg-alt); }
.cc-checkout--error .container { padding: var(--space-section-y) 0; }
.cc-checkout--error .cc-search-empty { background: var(--color-bg-white); }

/* Auth banner above the checkout form — informs the user they're signed in
   (with a sign-out link) or invites them to sign in to skip account fields. */
.cc-checkout__auth-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-body);
}
.cc-checkout__auth-banner--in {
  background: var(--color-accent-green-bg);
  color: var(--color-text-heading);
  border: 1px solid var(--color-accent-green-bg);
}
.cc-checkout__auth-banner--in svg { color: #1a7a4b; flex-shrink: 0; }
.cc-checkout__auth-banner--in a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.25rem;
}
.cc-checkout__auth-banner--in a:hover { color: var(--color-primary-dark); }

.cc-checkout__auth-banner--out {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
  justify-content: space-between;
  flex-wrap: wrap;
}
.cc-checkout__auth-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: gap var(--transition-base), color var(--transition-base);
}
.cc-checkout__auth-banner-cta:hover {
  color: var(--color-primary-darkest);
  gap: 0.625rem;
}

/* ---------------------------------------------------------------------------
   13a. Site-wide search results page (Figma 326:3024)
   --------------------------------------------------------------------------- */

.cc-search-page__header {
  padding: var(--space-section-y-sm) 0 var(--space-md);
}
.cc-search-page__header h1 {
  font-size: var(--text-h1);
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: var(--space-xs);
}
.cc-search-page__lede {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.cc-search-page__input {
  max-width: 35rem;  /* 560px */
}

.cc-search-page__body {
  padding-bottom: var(--space-section-y);
}

.cc-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-search-result {
  border-bottom: 1px solid var(--color-border);
}
.cc-search-result:last-child {
  border-bottom: none;
}
.cc-search-result__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-base);
}
.cc-search-result__link:hover .cc-search-result__title {
  color: var(--color-primary-dark);
}
.cc-search-result__icon {
  flex-shrink: 0;
  width: 2.75rem;  /* 44px */
  height: 2.75rem;
  background: var(--color-primary-tint);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-top: 0.125rem;
}
.cc-search-result__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.cc-search-result__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.cc-search-result__type {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-featured);
  text-transform: uppercase;
  color: var(--color-primary);
}
.cc-search-result__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  transition: color var(--transition-base);
}
.cc-search-result__excerpt {
  font-size: var(--text-body-featured);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* No-results card. Mirrors the .empty-state used elsewhere but uses a
   wider 1280px container per the Figma. */
.cc-search-empty {
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-section-y-sm) var(--space-lg);
  text-align: center;
  margin-top: var(--space-md);
}
.cc-search-empty__icon {
  width: 4rem;
  height: 4rem;
  background: var(--color-primary-tint);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}
.cc-search-empty h2 {
  font-size: var(--text-h2-alt);
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}
.cc-search-empty p {
  max-width: 31.25rem;  /* 500px */
  margin: 0 auto var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}
.cc-search-empty__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.cc-search-pagination {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

@media (max-width: 30rem) {
  .cc-search-result__link { padding: var(--space-md) 0; }
  .cc-search-result__title { font-size: var(--text-h3); }
}

/* ---------------------------------------------------------------------------
   13c. Course detail — Testimonial + Related blocks + hover polish
   --------------------------------------------------------------------------- */

.cc-course-testimonial { padding: 0; }

.cc-testimonial {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: 0;
  position: relative;
}
.cc-testimonial__mark {
  color: var(--color-primary-tint);
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 2rem;
  height: 2rem;
}
.cc-testimonial blockquote {
  margin: 0 0 var(--space-md);
  padding: 0;
  border: none;
}
.cc-testimonial blockquote p {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--color-text-heading);
  font-style: italic;
}
.cc-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.cc-testimonial__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.cc-testimonial__avatar--initial {
  background: var(--color-primary);
  color: var(--color-text-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
}
.cc-testimonial__author-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.cc-testimonial__author-text strong {
  color: var(--color-text-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-featured);
}
.cc-testimonial__author-text span {
  color: var(--color-text-muted);
  font-size: var(--text-body);
}

/* Related-courses grid (3-up on desktop, stacks on mobile) */
.cc-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-card-gap);
  margin-top: var(--space-md);
}
@media (max-width: 60rem) {
  .cc-related-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   13d. Hover / focus / active polish
   Audit pass — fills gaps in interactive feedback across course-detail
   surfaces. Where the existing rule was already strong (course-card,
   ld-button) we leave it untouched.
   --------------------------------------------------------------------------- */

/* (Course outline chevron + summary styles moved up to section 9 — Figma
   spec puts the chevron on the LEFT as an inline element, not a ::after.) */

/* Topic-sidebar items — slight indent on hover for the "this is clickable"
   feedback. */
.cc-topic-item {
  position: relative;
}
.cc-topic-item:hover .cc-topic-item-text { transform: translateX(2px); }
.cc-topic-item-text { transition: transform var(--transition-fast); }

/* Account nav links — clearer active vs hover separation. */
.cc-account-nav a:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}
.cc-account-nav a:active { background: var(--color-primary-tint); }

/* Search-result rows — entire link is interactive; underline title on hover. */
.cc-search-result__link:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.cc-search-result__link:hover .cc-search-result__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Course-card focus state for keyboard users. */
.course-card a:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   13b. Browse-courses cards — Phase 2 refinements
   --------------------------------------------------------------------------- */

/* Smaller card price — was dominating the card. Tightened to body-featured
   range (16px → 18px fluid). */
.course-card .course-card__price {
  font-size: var(--text-body-featured);
  font-weight: var(--weight-bold);
}

/* "Already purchased" badge — replaces the price for enrolled users.
   Subtle success-green tint with a tick icon. */
.course-card__owned {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--color-accent-green-bg);
  color: #1a7a4b;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.course-card__owned svg { flex-shrink: 0; }


/* Footer alignment: keep the bottom row at a consistent vertical position
   across all cards by reserving button-row height even when the CTA is a
   text-only "Coming Soon" tag. */
.course-card .course-card__footer {
  min-height: calc( var(--size-btn-h) + var(--space-card-padding) * 2 );
}

/* Fadeout fix: animations.css's `.reveal.is-visible { opacity: 1 }` overrides
   the coming-soon dim once the scroll-reveal animation completes. Match its
   specificity so the dim wins. */
.course-card.course-card--coming-soon.reveal.is-visible,
.course-card.course-card--coming-soon {
  opacity: 0.6;
}

/* Disabled-state CTA tag inside coming-soon card footer. The card itself has
   `pointer-events: none` so this never fires; the styles just give it the
   right shape. */
.course-card .btn.btn--disabled {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  cursor: not-allowed;
}
.course-card .btn.btn--disabled:hover {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* ---------------------------------------------------------------------------
   14a. Gravity Forms checkout — Course Purchase form refinements
   --------------------------------------------------------------------------- */

/* Hide the GF product field entirely on checkout. The Order Summary
   sidebar (.cc-checkout__totals) already shows course price + VAT +
   total, so the field's only job is to feed the price to Stripe — no
   visible chrome required. The hidden inputs still post their values. */
.gform_wrapper .gfield.cc-hidden-product {
  display: none !important;
}

/* Remove hidden-type fields from the grid layout. GF wraps every field
   — even `<input type="hidden">` ones — in a `<div class="gfield">`
   that becomes a grid item under the `.gform_fields` grid. Each empty
   cell + the grid's `gap: var(--space-md)` creates a phantom row of
   blank space; on form 5 (Course Purchase) the two hidden fields
   (Course ID + Course name) sit between Password and Payment, which
   reads as a giant unexplained gap. The values still post — we're just
   suppressing the wrapper. */
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield.gform_hidden {
  display: none !important;
}

/* Suppress GF's legacy float-clearing divs. Pre-2.5 GF used floats for
   complex (multi-input) field layouts and emitted a `<div class="gf_clear
   gf_clear_complex">` after each one to break out of the float context.
   The Orbital theme uses grid + flex so these elements are 0-height dead
   markup — not the cause of any visible gap, but worth removing as
   cleanup so the rendered DOM matches what people expect to see. */
.gform_wrapper .gf_clear,
.gform_wrapper .gf_clear_complex {
  display: none !important;
}

/* Style the legacy Stripe Card Element so it presents at the same height
   and chrome as our other text inputs. The GF Stripe Add-On ships CSS
   for `.StripeElement--card` but scopes it to `.gravity-theme` and
   `.gform_legacy_markup_wrapper` — neither of which applies to our
   Orbital form (`.gform-theme--orbital`). Without an explicit rule the
   element renders unstyled and the iframe inside collapses to the
   browser default height, cropping MM/YY and CVC out of view so the
   user only sees the card-number field.

   Setting min-height + standard input chrome lets Stripe's iframe sit
   at full input height and render its wide-mode layout (Card | MM/YY |
   CVC inline). */
.gform_wrapper .StripeElement--card {
  min-height: var(--size-btn-h);
  padding: 0 1rem;
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.gform_wrapper .StripeElement--card .__PrivateStripeElement,
.gform_wrapper .StripeElement--card iframe {
  width: 100%;
}
.gform_wrapper .StripeElement--card.StripeElement--focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 136, 172, 0.15);
}
.gform_wrapper .StripeElement--card.StripeElement--invalid {
  border-color: #c02b0a;
}

/* Visually hide GF sub-labels (rendered with class
   `gform-field-label--type-sub` on advanced fields like Name + Password).
   `subLabelPlacement = 'hidden'` is set via filter (see
   `carnaby_gf_hide_sub_labels`) but the Orbital form theme renders the
   sub-label regardless, and Phase 1's gravity-forms.css forces every
   `.gfield_label` to `display: block`. We override with a more specific
   selector and use sr-only positioning so screen readers still pick up
   the per-input label via the existing for=/id= association — sighted
   users see only the placeholder, which carries the same text. */
.gform_wrapper label.gform-field-label--type-sub {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Two-column layout for advanced fields on wider screens. GF stacks
   First/Last and Enter/Confirm Password vertically by default. With
   sub-labels hidden (see `carnaby_gf_hide_sub_labels`), the stacked
   layout wastes space — wide screens have room to put both inputs on
   one row and keep the form compact. */
.gform_wrapper .ginput_complex.ginput_container_name,
.gform_wrapper .ginput_complex.ginput_container_password {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .gform_wrapper .ginput_complex.ginput_container_name,
  .gform_wrapper .ginput_complex.ginput_container_password {
    grid-template-columns: 1fr 1fr;
  }
}
/* Reset GF's default span wrappers so each sub-input fills its grid cell
   cleanly. GF wraps sub-inputs in `<span class="name_first">` etc. with
   inline-flex/width:48% defaults that fight the grid. */
.gform_wrapper .ginput_complex.ginput_container_name > span,
.gform_wrapper .ginput_complex.ginput_container_password > span {
  display: block;
  width: 100%;
  padding: 0;
}

/* Consent fields — checkbox inline with text, on every form. The legacy
   `.cc-account__pane`-scoped rules above (account/login page) still apply
   on top of these; making it global means the checkout form (form 5)
   gets the same inline treatment without an extra wrapper. The field-level
   legend ("Legal agreement", "Refund waiver") is visually hidden — the
   consent text itself communicates the agreement, mirroring the inline
   gate on the course-detail page. */
.gform_wrapper .gfield--type-consent legend.gfield_label,
.gform_wrapper .gfield_consent legend.gfield_label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gform_wrapper .gfield--type-consent .gfield_consent_label,
.gform_wrapper .ginput_container_consent label {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin: 0;
}
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  margin: 0;
  margin-top: 0.25rem;
  accent-color: var(--color-primary-dark);
  flex-shrink: 0;
}

/* Match the form's "Complete purchase" button to our button system. */
.gform_wrapper .gform_footer .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-white);
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-full);
  height: var(--size-btn-h);
  padding: 0 var(--space-lg);
  cursor: pointer;
  width: 100%;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.gform_wrapper .gform_footer .gform_button:hover {
  background: var(--color-primary-darkest);
  transform: translateY(-1px);
}
/* Subtle progress indicator while Stripe + GF process the payment.
   The Stripe Add-On's behaviour varies — sometimes it sets `disabled`,
   sometimes it just changes the button's `value` to "Processing
   payment..." without disabling. Hedge by matching all three signals:
   :disabled, [value*="Processing"], and the wrapper's gform_processing
   class. Spinner appears via ::before so the text stays visible. */
/* "In-flight" submit-button state. Triggered by:
   - native `disabled` (set by GF/Stripe while a submission is in
     progress)
   - the GF "Processing..." button-value swap
   - GF's `gform_processing` class on the form during AJAX submit
   The `gform_validation_error` class is intentionally NOT in this
   list — it persists from the moment validation fails until the
   next submission, and locking the button with `pointer-events:
   none` while the user is mid-correction is the exact wrong UX
   (they'd see a no-cursor / no-click button even though the form
   is now valid). The keyboard-Tab + Enter path works fine in that
   state because `pointer-events: none` only blocks the mouse. */
.gform_wrapper .gform_footer .gform_button:disabled,
.gform_wrapper .gform_footer .gform_button[disabled],
.gform_wrapper .gform_footer .gform_button[disabled="disabled"],
.gform_wrapper .gform_footer .gform_button[value*="rocessing"],
form.gform_processing .gform_footer .gform_button {
  background: var(--color-primary-darkest);
  cursor: progress;
  opacity: 0.95;
  transform: none;
  pointer-events: none;
}
.gform_wrapper .gform_footer .gform_button:disabled::before,
.gform_wrapper .gform_footer .gform_button[disabled]::before,
.gform_wrapper .gform_footer .gform_button[disabled="disabled"]::before,
.gform_wrapper .gform_footer .gform_button[value*="rocessing"]::before,
form.gform_processing .gform_footer .gform_button::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.625rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-text-white);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
/* When the Stripe Add-On's iframe overlay is present, mark the form so
   the button gets the spinner. Hooked from JS in template-checkout.php. */
.gform_wrapper.is-processing .gform_footer .gform_button {
  cursor: progress;
  opacity: 0.95;
  pointer-events: none;
}
.gform_wrapper.is-processing .gform_footer .gform_button::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.625rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-text-white);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
@keyframes cc-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   14. Coming-soon overlay (shared with Phase 1's coming-soon pattern)
   --------------------------------------------------------------------------- */

.cc-ld-comingsoon {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
}
.cc-ld-comingsoon strong { color: var(--color-warning-text-bold); }

/* ---------------------------------------------------------------------------
   15. Course content placeholders.

   Used in v2 imported lessons / topics wherever the client hasn't yet
   supplied a real image or video. Visually distinctive (tinted bg,
   dashed border, prominent label) so it's obvious this needs replacing
   before launch — but neat enough to demo to the client.

   Aspect ratio is set inline by the shortcode (defaults to 16:9).
   --------------------------------------------------------------------------- */

.cc-placeholder {
  background: var(--color-primary-tint);
  border: 2px dashed rgba(0, 76, 114, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-md) 0;
  padding: var(--space-md);
  overflow: hidden;
  /* Cap the height so a tall aspect ratio (e.g. portrait) doesn't
     dominate the lesson page. */
  max-height: 28rem;
}
.cc-placeholder__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 32rem;
}
.cc-placeholder__icon {
  width: 4rem;
  height: 4rem;
  background: var(--color-bg-white);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  box-shadow: 0 2px 6px rgba(0, 76, 114, 0.06);
}
.cc-placeholder__tag {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-featured);
  color: var(--color-primary-dark);
  background: var(--color-bg-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  display: inline-block;
}
.cc-placeholder__alt {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  font-style: italic;
}
/* Video placeholder — slight visual differentiation via the play icon
   wrapper (background tint shifts to the primary so the play triangle
   reads more like a "press to play" affordance). */
.cc-placeholder--video .cc-placeholder__icon {
  background: var(--color-primary-dark);
  color: var(--color-text-white);
}

/* ---------------------------------------------------------------------------
   16. Course content blocks — the five v2 styled components.

   Used inline in lesson / topic body content via shortcodes (see
   `inc/learndash.php`). Each is keyed to the design language already
   established in the rest of the theme — same radii, same colour
   tokens, same spacing rhythm.
   --------------------------------------------------------------------------- */

/* 16a. Dark callout — navy bg, white text. NB: an older `.cc-callout`
   rule earlier in this file paints a light-blue tinted callout with a
   primary-coloured left border and dark `<p>` text. The overrides here
   (border:0; explicit white on `.cc-callout p`) defeat that cascade so
   the new dark variant renders correctly even when both rule sets are
   live. */
.cc-callout {
  background: var(--color-primary-darkest);
  color: var(--color-text-white);
  padding: var(--space-lg);
  border: 0;
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}
/* Selector is doubled (`.cc-callout .cc-callout__title`) on purpose —
   the legacy `.cc-callout h3` rule earlier in this file has the same
   specificity as a single-class selector but wins on tag-vs-class, so
   without the bump the title renders in `--color-primary-darkest`. */
.cc-callout .cc-callout__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-card);
  font-weight: var(--weight-bold);
  color: var(--color-text-white);
  margin: 0 0 var(--space-sm);
  line-height: var(--leading-heading);
}
/* Pure white body text — `--color-text-white-75` (75% alpha) was the
   first try and tested as too low-contrast against the dark navy
   background. WCAG AA wants at least 4.5:1; pure white on #00293d
   sits at ~16:1 which is comfortably above. */
.cc-callout__body { color: var(--color-text-white); line-height: var(--leading-body); font-size: var(--text-body-lg); }
.cc-callout__body > :first-child { margin-top: 0; }
.cc-callout__body > :last-child  { margin-bottom: 0; }
/* Explicit colour on the descendant `<p>` to outrank the older
   `.cc-callout p { color: var(--color-text-body) }` rule. */
.cc-callout__body p { margin: 0 0 var(--space-sm); color: var(--color-text-white); }
.cc-callout__body a { color: var(--color-text-white); text-decoration: underline; text-underline-offset: 3px; }
.cc-callout__body a:hover { opacity: 0.85; }
.cc-callout__body strong { color: var(--color-text-white); font-weight: var(--weight-semibold); }
.cc-callout__body em { color: var(--color-text-white); }

/* 16b. Highlighted note (Important to remember). Tinted bg + left
   border in the primary. */
.cc-note {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}
.cc-note__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-featured);
  color: var(--color-primary-darkest);
  margin: 0 0 var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cc-note__icon { color: var(--color-primary); flex-shrink: 0; }
.cc-note__body { color: var(--color-text-body); line-height: var(--leading-body); }
.cc-note__body > :first-child { margin-top: 0; }
.cc-note__body > :last-child  { margin-bottom: 0; }

/* 16c. Two-column comparison. Stacks on mobile. */
.cc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
/* Cards used the alt bg from the existing palette so they read as a
   distinct surface without needing top/side borders — the user asked
   us to strip those after the previous pass. */
.cc-compare__col {
  background: var(--color-bg-alt);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.cc-compare__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3-card);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--leading-heading);
}
.cc-compare__body { color: var(--color-text-body); line-height: var(--leading-body); }
.cc-compare__body > :first-child { margin-top: 0; }
.cc-compare__body > :last-child  { margin-bottom: 0; }
@media (max-width: 40rem) {
  .cc-compare { grid-template-columns: 1fr; }
}

/* 16d. Pull-quote card — italic centred quote, attribution beneath. */
.cc-pullquote {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  margin: var(--space-md) 0;
  position: relative;
  text-align: center;
}
.cc-pullquote__mark {
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary-tint);
  pointer-events: none;
}
.cc-pullquote__body {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--color-text-heading);
  line-height: var(--leading-body);
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto var(--space-sm);
}
.cc-pullquote__body > :first-child { margin-top: 0; }
.cc-pullquote__body > :last-child  { margin-bottom: 0; }
.cc-pullquote__body p { margin: 0; }
.cc-pullquote__attrib {
  margin: var(--space-xs) 0 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}
.cc-pullquote__attrib cite {
  font-style: normal;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
}

/* 16e. Aims / objectives — styled bullets with a tinted check marker. */
.cc-aims {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}
.cc-aims__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-featured);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-sm);
}
.cc-aims__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-aims__body li {
  padding: 0.375rem 0 0.375rem 2rem;
  position: relative;
  color: var(--color-text-body);
  line-height: var(--leading-body);
}
.cc-aims__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--color-primary-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004c72' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem 0.8rem;
}

/* ============================================================================
 * Phase 2F — Org Dashboard
 *
 * Layout: 260px sidebar (fixed, dark) + flex-1 main content (off-white).
 * Matches Hi-Fi `dashboard-overview-desktop.html` (Figma 332:5339) and is
 * reused across every /dashboard/* template.
 *
 * Mobile: sidebar collapses above the main content (no drawer / hamburger
 * for now — Phase 2 is desktop-first per Ashley's note in the Hi-Fi
 * folder; mobile polish is a Phase 2G item if needed).
 * ============================================================================ */

.cc-org-page {
	display: flex;
	min-height: calc(100vh - 80px);
	background: #FAFAFA;
}

/* Adjacent text + SVG inside dashboard buttons need a gap. The base
 * .btn class doesn't set one, so without this the icon visually
 * touches the label. Scoped to the dashboard so the rule doesn't
 * affect Phase 1 button layouts. */
.cc-org-page .btn { gap: 8px; }

/* `.btn--outline` is designed for dark hero/banner backgrounds in
 * Phase 1 (white text + translucent white border). On the dashboard's
 * light grey ground that combo is invisible — Ash flagged 4 May 2026
 * with "Purchase More Seats" appearing as a near-blank pill. Override
 * to accent-blue border + accent-blue text on light surfaces. Hover
 * deepens to primary blue with a subtle wash so the affordance is
 * obvious. Scoped to `.cc-org-page` so the original Phase 1 styling
 * is untouched. */
.cc-org-page .btn--outline {
	background-color: transparent;
	color: #3388AC;
	border: 2px solid #3388AC;
}
.cc-org-page .btn--outline:hover,
.cc-org-page .btn--outline:focus-visible {
	background-color: rgba(51, 136, 172, 0.08);
	border-color: #004C72;
	color: #004C72;
}

/* --- Sidebar ---------------------------------------------------------------*/

.cc-org-sidebar {
	width: 260px;
	min-width: 260px;
	background: #00293D;
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 32px 0;
}

.cc-org-sidebar__brand {
	padding: 0 24px 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 8px;
}

.cc-org-sidebar__label {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
}

.cc-org-sidebar__name {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	word-break: break-word;
}

/* Package switcher (Phase 2J). Only renders when the leader has more
 * than one active package. Native <select> styled to match the dark
 * sidebar; auto-submits on change via the inline script in the
 * partial. The caret SVG sits inside the wrap and is positioned over
 * the select's right edge — `pointer-events: none` keeps clicks
 * passing through to the underlying <select>. */
.cc-org-sidebar__switcher {
	padding: 0 24px 20px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-org-sidebar__switcher-label {
	display: block;
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
}

.cc-org-sidebar__switcher-wrap {
	position: relative;
}

.cc-org-sidebar__switcher-select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 9px 32px 9px 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	color: #fff;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.cc-org-sidebar__switcher-select:hover { background: rgba(255, 255, 255, 0.12); }
.cc-org-sidebar__switcher-select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-color: rgba(255, 255, 255, 0.4);
}

/* Native option styling is browser-restricted, but Firefox/Chrome on
 * desktop will honour these — at minimum it keeps the dropdown panel
 * readable on dark themes. */
.cc-org-sidebar__switcher-select option {
	background: #00293D;
	color: #fff;
}

.cc-org-sidebar__switcher-caret {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

.cc-org-sidebar__switcher-submit {
	margin-top: 8px;
	width: 100%;
	padding: 8px 12px;
	background: var(--color-primary);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cc-org-sidebar__nav {
	list-style: none;
	flex: 1;
	padding: 8px 0;
	margin: 0;
}

.cc-org-sidebar__nav li { margin: 0; }

.cc-org-sidebar__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 24px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	border-left: 3px solid transparent;
}

.cc-org-sidebar__link:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.cc-org-sidebar__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.cc-org-sidebar__link.is-active {
	background: #fff;
	color: var(--color-primary);
	border-left-color: var(--color-primary);
	font-weight: 600;
}

.cc-org-sidebar__link svg {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
}

.cc-org-sidebar__link.is-active svg { color: var(--color-primary); }

.cc-org-sidebar__back {
	margin-top: auto;
	padding: 16px 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-org-sidebar__back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.15s;
}

.cc-org-sidebar__back-link:hover { color: #fff; }
.cc-org-sidebar__back-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.cc-org-sidebar__back-link svg { width: 18px; height: 18px; }

/* --- Main content ---------------------------------------------------------- */

.cc-org-main {
	flex: 1;
	padding: 48px;
	background: #FAFAFA;
	min-width: 0;
}

/* Mobile / narrow viewport: keep sidebar on the left but collapse it
 * to an icon rail. Brand text and link labels are hidden, link
 * paddings tighten, icons centre. Common pattern (Slack / Notion). */
@media (max-width: 960px) {
	.cc-org-sidebar {
		width: 64px;
		min-width: 64px;
		padding: 24px 0;
	}
	.cc-org-sidebar__brand {
		padding: 0 0 20px;
		margin-bottom: 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		text-align: center;
	}
	.cc-org-sidebar__label,
	.cc-org-sidebar__name { display: none; }

	/* Hide the switcher on the icon-rail viewport — there's not enough
	 * horizontal room to render a usable dropdown. Multi-package users
	 * on mobile/narrow screens stay on their current package; they can
	 * widen the viewport to switch. */
	.cc-org-sidebar__switcher { display: none; }

	/* A small visual marker so the brand block still has presence —
	 * a centered building icon — drawn purely in CSS so we don't
	 * have to touch the sidebar partial. */
	.cc-org-sidebar__brand::before {
		content: '';
		display: block;
		width: 22px;
		height: 22px;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.5);
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l8-4v18'/><path d='M19 21V11l-6-4'/></svg>") no-repeat center / contain;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l8-4v18'/><path d='M19 21V11l-6-4'/></svg>") no-repeat center / contain;
	}

	.cc-org-sidebar__link {
		justify-content: center;
		padding: 14px 0;
		gap: 0;
	}
	.cc-org-sidebar__link span { display: none; }
	.cc-org-sidebar__link svg { width: 22px; height: 22px; }

	.cc-org-sidebar__back { padding: 12px 0 0; text-align: center; }
	/* font-size:0 collapses the "Back to Site" text node without
	 * needing to wrap it in a span; the SVG keeps its declared
	 * width/height attributes so it renders unchanged. */
	.cc-org-sidebar__back-link {
		font-size: 0;
		gap: 0;
	}
	.cc-org-sidebar__back-link svg { width: 22px; height: 22px; }

	.cc-org-main { padding: 24px; }

	/* Multi-package mode opt-out (Phase 2J, L1 fix from 18 May 2026
	 * code review). When the leader has >1 package the icon-rail makes
	 * the switcher unreachable on phones, so the sidebar stays at full
	 * width and the switcher renders normally. Trade-off: less room for
	 * `<main>`, but a multi-package leader who can't switch packages
	 * has a bigger problem than a slightly squeezed content area. */
	.cc-org-sidebar.cc-org-sidebar--multi {
		width: 220px;
		min-width: 220px;
		padding: 24px 0;
	}
	.cc-org-sidebar--multi .cc-org-sidebar__brand {
		padding: 0 20px 20px;
		text-align: left;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.cc-org-sidebar--multi .cc-org-sidebar__brand::before { display: none; }
	.cc-org-sidebar--multi .cc-org-sidebar__label,
	.cc-org-sidebar--multi .cc-org-sidebar__name { display: block; }
	.cc-org-sidebar--multi .cc-org-sidebar__name { font-size: 14px; }
	.cc-org-sidebar--multi .cc-org-sidebar__switcher { display: block; padding: 0 20px 18px; }
	.cc-org-sidebar--multi .cc-org-sidebar__link {
		justify-content: flex-start;
		padding: 11px 20px;
		gap: 12px;
	}
	.cc-org-sidebar--multi .cc-org-sidebar__link span { display: inline; }
	.cc-org-sidebar--multi .cc-org-sidebar__back { padding: 16px 20px 0; text-align: left; }
	.cc-org-sidebar--multi .cc-org-sidebar__back-link { font-size: 14px; gap: 8px; }
}

/* Phone layout (≤640px). Even the 64px icon-rail wastes too much
 * horizontal real estate on phones, and the 220px multi-package
 * opt-out really hurts. Flip the whole page to a stacked layout:
 * sidebar becomes a compact horizontal top bar, nav links become a
 * horizontal icon strip, and the switcher (if multi) sits inline
 * across the full width. Main content then gets the full viewport
 * below. (Ash flagged 18 May 2026 — multi-package sidebar at 220px
 * left only ~340px for main on a 558px viewport, squashing stat
 * cards and causing horizontal overflow.) */
@media (max-width: 640px) {
	.cc-org-page {
		flex-direction: column;
	}
	.cc-org-sidebar,
	.cc-org-sidebar.cc-org-sidebar--multi {
		width: 100%;
		min-width: 0;
		padding: 12px 16px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
	}
	/* Brand removed on phones — site header already shows the org
	 * context, and we need the vertical space. */
	.cc-org-sidebar__brand,
	.cc-org-sidebar--multi .cc-org-sidebar__brand { display: none; }

	/* Multi-package switcher: full-width row above the nav strip. */
	.cc-org-sidebar--multi .cc-org-sidebar__switcher {
		display: block;
		flex: 1 1 100%;
		padding: 0;
		margin: 0;
		border: 0;
	}
	.cc-org-sidebar--multi .cc-org-sidebar__switcher-label {
		margin-bottom: 4px;
	}

	/* Nav: horizontal icon strip. Overflow-x:auto handles edge cases
	 * if a new nav item is ever added that doesn't fit. Active state
	 * shifts from left-border to bottom-border since we're horizontal. */
	.cc-org-sidebar__nav {
		flex: 1 1 auto;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		gap: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cc-org-sidebar__nav li { flex: 1 0 auto; margin: 0; }
	.cc-org-sidebar__link,
	.cc-org-sidebar--multi .cc-org-sidebar__link {
		justify-content: center;
		padding: 10px 14px;
		gap: 0;
		border-left: 0;
		border-bottom: 3px solid transparent;
	}
	.cc-org-sidebar__link.is-active,
	.cc-org-sidebar--multi .cc-org-sidebar__link.is-active {
		background: #fff;
		border-bottom-color: var(--color-primary);
	}
	.cc-org-sidebar__link span,
	.cc-org-sidebar--multi .cc-org-sidebar__link span { display: none; }
	.cc-org-sidebar__link svg,
	.cc-org-sidebar--multi .cc-org-sidebar__link svg {
		width: 22px;
		height: 22px;
	}

	/* Back-to-site: compact icon-only button to the right of the nav strip. */
	.cc-org-sidebar__back,
	.cc-org-sidebar--multi .cc-org-sidebar__back {
		flex: 0 0 auto;
		padding: 0;
		margin: 0;
		border: 0;
	}
	.cc-org-sidebar__back-link,
	.cc-org-sidebar--multi .cc-org-sidebar__back-link {
		font-size: 0;
		gap: 0;
		padding: 10px;
	}
	.cc-org-sidebar__back-link svg { width: 22px; height: 22px; }

	/* Main content: full width with tightened padding for phone. */
	.cc-org-main {
		padding: 20px 16px;
	}
}

/* Small-phone tightening (≤400px). At 320px the 5 nav icons + back
 * icon + sidebar gaps push the back link to wrap to its own row.
 * Trim the icon padding so everything fits on one line and the
 * top bar stays compact. (Ash flagged 18 May 2026.) */
@media (max-width: 400px) {
	.cc-org-sidebar,
	.cc-org-sidebar.cc-org-sidebar--multi {
		padding: 10px 12px;
		gap: 8px;
	}
	.cc-org-sidebar__nav { gap: 2px; }
	.cc-org-sidebar__link,
	.cc-org-sidebar--multi .cc-org-sidebar__link {
		padding: 8px 8px;
	}
	.cc-org-sidebar__link svg,
	.cc-org-sidebar--multi .cc-org-sidebar__link svg {
		width: 20px;
		height: 20px;
	}
	.cc-org-sidebar__back-link,
	.cc-org-sidebar--multi .cc-org-sidebar__back-link {
		padding: 8px;
	}
	.cc-org-sidebar__back-link svg { width: 20px; height: 20px; }

	/* Switcher select: drop a notch of font-size so long option text
	 * doesn't truncate as aggressively. Native <select> truncation is
	 * unavoidable but the smaller text lets more characters fit. */
	.cc-org-sidebar__switcher-select { font-size: 12px; padding: 8px 28px 8px 10px; }

	/* Main content padding shrinks one more notch for very small phones. */
	.cc-org-main { padding: 16px 12px; }
}

/* --- Welcome head ----------------------------------------------------------*/

.cc-org-welcome { margin-bottom: 36px; }

.cc-org-welcome h1 {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0 0 4px;
}

.cc-org-welcome p {
	font-size: 15px;
	color: var(--color-text-muted);
	margin: 0;
}

/* --- Success toast (post-payment) ------------------------------------------*/

.cc-org-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 48px 16px 20px; /* right-pad reserves space for close btn */
	border-radius: 12px;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.5;
}

/* Close button injected by the sidebar partial's JS — see comments
 * there. Positioned absolutely top-right, neutral colour, hover hints
 * with a soft background tint. Inherits text colour so it matches
 * success vs error toast palettes without per-variant overrides. */
.cc-org-toast__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s;
	padding: 0;
}
.cc-org-toast__close:hover,
.cc-org-toast__close:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06);
	outline: none;
}
/* Bumped specificity (extra class on the chain) so this rule wins over
 * the generic `.cc-org-toast svg` declared further down. Without the
 * chain it ties and source-order picks the colour rule for the close
 * icon — which paints it brand green and adds a stray margin-top. */
.cc-org-toast .cc-org-toast__close svg {
	width: 16px;
	height: 16px;
	margin: 0;
	color: inherit;
}

.cc-org-toast--success {
	background: #E8F5EE;
	color: #1A5C3A;
	border-left: 3px solid #1A7A4B;
}

.cc-org-toast svg {
	flex-shrink: 0;
	color: #1A7A4B;
	margin-top: 2px;
}

.cc-org-toast strong { display: block; margin-bottom: 2px; }

/* --- Stat cards row -------------------------------------------------------- */

.cc-org-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 1100px) {
	.cc-org-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Small-phone fallback (≤480px) — a single pass that tightens
 * paddings, drops grids to one column, and shrinks heading sizes
 * so the whole org dashboard breathes properly at 320–480px.
 * (Ash flagged 18 May 2026.) */
@media (max-width: 480px) {
	/* Stat cards: 2-up squashes the icon + label + value into ~135px
	 * each at 320px which is cramped to the point of broken. Stack
	 * to a single column. */
	.cc-org-stats { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
	.cc-org-stat { padding: 16px 18px; }
	.cc-org-stat__value { font-size: 24px; }

	/* Page header — 28px headings dominate the viewport on phones.
	 * Shrink to 22px and tighten the margin below the header. */
	.cc-org-welcome { margin-bottom: 24px; }
	.cc-org-welcome h1 { font-size: 22px; }
	.cc-org-welcome p  { font-size: 14px; }

	/* Form/section cards: 28px padding all round eats ~17% of a 320px
	 * viewport. Drop to 18px and pull margin between cards inwards
	 * for a tighter rhythm. */
	.cc-org-block { padding: 18px; margin-bottom: 20px; border-radius: 12px; }
	.cc-org-block__title { font-size: 16px; margin-bottom: 14px; }
	.cc-org-block__lede { font-size: 14px; }
	.cc-org-block--placeholder { padding: 28px 18px; }

	/* Defensive: force the form and its grid row to fill the block
	 * width. (Ash flagged 18 May 2026 — DevTools showed the row at
	 * 232px on a 314px viewport with no obvious CSS constraint.) The
	 * form is an `<form>` block element so it *should* stretch by
	 * default, but on some browser/version combinations form widths
	 * are min-content-sized rather than parent-stretched. Belt and
	 * braces. */
	.cc-org-invite-form,
	.cc-org-invite-form__row,
	.cc-org-bulk-form { width: 100%; }
}

.cc-org-stat {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.cc-org-stat__icon {
	width: 44px;
	height: 44px;
	background: var(--color-primary-tint);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cc-org-stat__icon svg {
	width: 22px;
	height: 22px;
	color: var(--color-primary);
}

.cc-org-stat__body { flex: 1; min-width: 0; }

.cc-org-stat__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.cc-org-stat__value {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.2;
}

/* --- Section block --------------------------------------------------------*/

.cc-org-block {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 28px;
	margin-bottom: 32px;
}

.cc-org-block__title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0 0 20px;
}

/* --- Activity feed ---------------------------------------------------------*/

.cc-org-activity {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-org-activity__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #F0F0F1;
}

.cc-org-activity__item:last-child { border-bottom: none; }

.cc-org-activity__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 7px;
	background: var(--color-primary);
}

.cc-org-activity__dot--completed_course   { background: #1A7A4B; }
.cc-org-activity__dot--passed_quiz        { background: var(--color-primary); }
.cc-org-activity__dot--failed_quiz        { background: #C23B22; }
.cc-org-activity__dot--completed_lesson   { background: #3388AC; }
.cc-org-activity__dot--enrolled           { background: #B8860B; }
.cc-org-activity__dot--certificate        { background: #1A7A4B; }

.cc-org-activity__text {
	flex: 1;
	font-size: 15px;
	color: var(--color-text-body);
	line-height: 1.5;
}

.cc-org-activity__text strong {
	font-weight: 600;
	color: var(--color-text-heading);
}

.cc-org-activity__time {
	font-size: 13px;
	color: var(--color-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 2px;
}

.cc-org-activity__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	margin-top: 12px;
	transition: color 0.15s;
}

.cc-org-activity__more:hover { color: var(--color-primary-dark); }
.cc-org-activity__more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.cc-org-activity-empty {
	text-align: center;
	padding: 24px 0 8px;
}

.cc-org-activity-empty p {
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

/* --- Quick actions -------------------------------------------------------- */

.cc-org-quick__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- Placeholder card ------------------------------------------------------*/

.cc-org-block--placeholder { padding: 40px 24px; }

.cc-org-placeholder-card {
	text-align: center;
	color: var(--color-text-muted);
}

.cc-org-placeholder-card svg {
	color: var(--color-primary);
	opacity: 0.6;
	display: block;
	margin: 0 auto 16px;
}

.cc-org-placeholder-card h2 {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0 0 8px;
}

.cc-org-placeholder-card p {
	font-size: 15px;
	margin: 0 auto 20px;
	max-width: 480px;
}

/* ============================================================================
 * Stage 3 — Seat Management
 * ============================================================================ */

/* --- Error toast variant ---------------------------------------------------*/

.cc-org-toast--error {
	background: #FCEAE7;
	color: #8B2818;
	border-left: 3px solid #C23B22;
}

.cc-org-toast--error svg { color: #C23B22; }

/* --- Allocation block (used / total bar) -----------------------------------*/

.cc-org-allocation {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 24px 28px;
	margin-bottom: 24px;
}

.cc-org-allocation__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text-heading);
	margin-bottom: 12px;
}

.cc-org-allocation__bar {
	height: 12px;
	background: #F0F0F1;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}

.cc-org-allocation__fill {
	height: 100%;
	background: var(--color-primary);
	border-radius: 6px;
	transition: width 0.3s ease;
}

.cc-org-allocation__meta {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--color-text-muted);
}

.cc-org-allocation__meta strong { color: var(--color-text-heading); }

/* --- Filter bar ------------------------------------------------------------*/

.cc-org-filterbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.cc-org-filterbar input[type="search"] {
	flex: 1;
	min-width: 200px;
	padding: 10px 16px;
	font-family: var(--font-body);
	font-size: 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: #fff;
	color: var(--color-text-body);
	outline: none;
	transition: border-color 0.15s;
}

.cc-org-filterbar input[type="search"]:focus { border-color: var(--color-primary); }
.cc-org-filterbar input[type="search"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cc-org-filterbar input[type="search"]::placeholder { color: #A6A8AA; }

.cc-org-filterbar select {
	padding: 10px 36px 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: #fff;
	color: var(--color-text-body);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6D6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	outline: none;
}

.cc-org-filterbar select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* --- Data table ------------------------------------------------------------*/

.cc-org-table-wrap {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 12px;
}

.cc-org-table {
	width: 100%;
	border-collapse: collapse;
}

.cc-org-table thead th {
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-muted);
	background: #FAFAFA;
	padding: 14px 20px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.cc-org-table tbody td {
	padding: 14px 20px;
	font-size: 14px;
	color: var(--color-text-body);
	border-bottom: 1px solid #F0F0F1;
	vertical-align: middle;
}

.cc-org-table tbody tr:last-child td { border-bottom: none; }

.cc-org-table tbody tr:hover { background: var(--color-primary-tint); }

.cc-org-table__name {
	font-weight: 600;
	color: var(--color-text-heading);
}

.cc-org-table__email {
	color: var(--color-text-muted);
}

.cc-org-table__dim { color: var(--color-text-muted); }

.cc-org-table__actions { white-space: nowrap; }
.cc-org-table__actions-col { width: 1%; }

.cc-org-table__no-results {
	padding: 32px 20px;
	text-align: center;
	color: var(--color-text-muted);
	background: #fff;
	border: 1px solid var(--color-border);
	border-top: none;
	border-radius: 0 0 16px 16px;
}

/* --- Status badges ---------------------------------------------------------*/

.cc-org-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 9999px;
	white-space: nowrap;
}

.cc-org-badge--active      { color: #1A7A4B; background: #E8F5EE; }
.cc-org-badge--completed   { color: #4A4C4E; background: #F0F0F1; }
.cc-org-badge--pending     { color: #B8860B; background: #FFF8E6; }
.cc-org-badge--not_started { color: #6B6D6F; background: #F0F0F1; }

/* --- Mini progress bar inside the table -----------------------------------*/

.cc-org-progress-mini {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cc-org-progress-mini__bar {
	width: 80px;
	height: 6px;
	background: #F0F0F1;
	border-radius: 3px;
	overflow: hidden;
}

.cc-org-progress-mini__fill {
	height: 100%;
	background: var(--color-primary);
	border-radius: 3px;
	transition: width 0.3s ease;
}

.cc-org-progress-mini__fill.is-complete { background: #1A7A4B; }

.cc-org-progress-mini__text {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
}

/* --- Revoke link button ----------------------------------------------------*/

.cc-org-revoke-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.cc-org-revoke-link {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #C23B22;
	cursor: pointer;
	transition: color 0.15s;
}

.cc-org-revoke-link:hover { color: #8B2818; text-decoration: underline; }
.cc-org-revoke-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* --- Confirmation dialog (native <dialog>) --------------------------------*/

.cc-org-dialog {
	max-width: 480px;
	width: calc(100% - 32px); /* leave a 16px gutter on tiny viewports */
	border: 0;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
	background: #fff;
	color: var(--color-text-body);
}

/* Centre the open dialog explicitly. Native browser defaults usually
 * centre a `<dialog>` opened with `showModal()` via `margin: auto` on
 * the absolute-positioned element, but this site has a global reset
 * that strips that — without an explicit rule the modal anchors top-
 * left of the viewport (Ash flagged 5 May 2026, screenshot). Fixed +
 * transform is the most defensive recipe; works regardless of what
 * `margin` / `inset` defaults survive higher up the cascade. */
.cc-org-dialog[open] {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.cc-org-dialog::backdrop {
	background: rgba(0, 41, 61, 0.5);
}

/* `.btn--outline` overrides for this dialog specifically — the dialog
 * is rendered outside the `.cc-org-page` wrapper (it gets included
 * after `</main></div>` in both seats and invite templates), so the
 * `.cc-org-page .btn--outline` override we added earlier doesn't
 * reach it. Without this rule the Cancel button paints as the Phase 1
 * "white text on a translucent-white border" treatment built for dark
 * hero backgrounds, which renders as a near-invisible empty pill on
 * the modal's white surface. Same accent-blue treatment as the
 * dashboard buttons. */
.cc-org-dialog .btn--outline {
	background-color: transparent;
	color: #3388AC;
	border: 2px solid #3388AC;
}
.cc-org-dialog .btn--outline:hover,
.cc-org-dialog .btn--outline:focus-visible {
	background-color: rgba(51, 136, 172, 0.08);
	border-color: #004C72;
	color: #004C72;
}

.cc-org-dialog__title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0 0 12px;
}

.cc-org-dialog__body {
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-body);
	margin: 0 0 24px;
}

.cc-org-dialog__body strong { color: var(--color-text-heading); }
.cc-org-dialog__body p { margin: 0 0 12px; }
.cc-org-dialog__body p:last-child { margin-bottom: 0; }

/* "Caution" callout at the top of the member-revoke dialog. Amber
 * background + warning icon — gives the seat-not-credited-back
 * message the visual prominence the client (Nicholas, 5 May 2026)
 * asked for, without flipping the whole dialog to a red error state
 * (which would over-signal severity — a revoke isn't an error). */
.cc-org-dialog__caution {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #FFF4D9;
	color: #6B5A00;
	border-left: 3px solid #B8860B;
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.45;
}
.cc-org-dialog__caution svg {
	flex-shrink: 0;
	color: #B8860B;
	margin-top: 1px;
}
.cc-org-dialog__caution strong {
	color: #6B5A00;
}

.cc-org-dialog__meta {
	font-size: 13px;
	color: var(--color-text-muted);
}

.cc-org-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.cc-org-btn-danger {
	background: #C23B22;
	color: #fff;
	border: 0;
	padding: 12px 24px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	border-radius: 9999px;
	cursor: pointer;
	transition: background 0.15s;
}

.cc-org-btn-danger:hover { background: #8B2818; }
.cc-org-btn-danger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* --- Mobile: collapse table to stacked cards ------------------------------*/

@media (max-width: 720px) {
	.cc-org-table thead { display: none; }
	.cc-org-table, .cc-org-table tbody, .cc-org-table tr, .cc-org-table td { display: block; width: 100%; }
	.cc-org-table tbody tr {
		padding: 16px;
		border-bottom: 1px solid #F0F0F1;
	}
	.cc-org-table tbody td {
		border-bottom: none;
		padding: 4px 0;
	}
	.cc-org-table__actions { padding-top: 12px !important; }
}

/* ============================================================================
 * Stage 4 — Invite Staff
 * ============================================================================ */

/* --- Block sub-lede paragraph (used in invite form intro) ---------------- */

.cc-org-block__lede {
	font-size: 14px;
	color: var(--color-text-muted);
	margin: -12px 0 24px;
}

.cc-org-block__lede code {
	font-size: 13px;
	background: #F0F0F1;
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--color-text-heading);
}

/* --- Single invite form ---------------------------------------------------*/

.cc-org-invite-form { margin: 0; }

/*
 * Responsive plan (Ash flagged 18 May 2026 — Send Invitation button
 * was getting clipped off the right edge at medium widths):
 *
 *   ≥1101px: Email · Name · Course · [Send] all in one row.
 *   ≤1100px: fully stacked single column (tablet + below). Cramming
 *            three text fields plus a button into a tablet-landscape
 *            viewport produced an awkward Course dropdown with the
 *            "Introduction to Autism — Professionals" option title
 *            truncated; stacking gives each field room to breathe
 *            and makes the form touch-friendly in one go.
 *
 * The `minmax(0, …fr)` on the desktop columns is the critical fix —
 * without it, CSS Grid treats `1fr` as `minmax(auto, 1fr)`, so a
 * long option text in the Course `<select>` forces the column wider
 * than 1fr and pushes the `auto` button column off-canvas. (Kept
 * here as belt-and-braces even though the breakpoint now hides
 * the multi-column layout earlier.)
 */
.cc-org-invite-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 12px;
	align-items: end;
}

@media (max-width: 1100px) {
	.cc-org-invite-form__row { grid-template-columns: 1fr; }
}

.cc-org-field { display: flex; flex-direction: column; gap: 6px; }

.cc-org-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-heading);
}

.cc-org-required { color: #C23B22; }

.cc-org-field__opt {
	font-weight: 400;
	color: var(--color-text-muted);
}

.cc-org-field input[type="email"],
.cc-org-field input[type="text"],
.cc-org-field input[type="number"],
.cc-org-field select {
	/* width: 100% is the critical fix (Ash flagged 18 May 2026 — at
	 * 360px and below the inputs were eating block padding then
	 * overlapping the card edge). HTML inputs default to a width
	 * derived from their `size` attribute (~20 chars for text/email,
	 * which lands around 250px), NOT 100% of parent. In a 1fr grid
	 * cell narrower than that, the input refuses to shrink and
	 * blows past the row width even though box-sizing is border-box.
	 * Forcing 100% width + min-width: 0 lets the input shrink to
	 * fit any column. */
	width: 100%;
	min-width: 0;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: #fff;
	color: var(--color-text-body);
	outline: none;
	transition: border-color 0.15s;
}

.cc-org-field input:focus,
.cc-org-field select:focus { border-color: var(--color-primary); }
.cc-org-field input:focus-visible,
.cc-org-field select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cc-org-field input::placeholder { color: #A6A8AA; }

.cc-org-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6D6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

.cc-org-field--submit { align-self: end; }

/* Match the Send Invitation button height to the adjacent email / name /
 * course fields. Per Figma `invite-users-desktop.html` (332:5599) this
 * button sits flush with the inputs in the same row — distinctly
 * shorter than the standard primary button used elsewhere on the
 * dashboard. Ash flagged 4 May 2026: "match what we see in Figma,
 * even if it diverges from the rest of the buttons". The fields above
 * use `padding: 10px 14px` + `font-size: 14px`, computing to ~42px;
 * we mirror that here. */
.cc-org-invite-form .cc-org-field--submit .btn--primary {
	padding: 10px 22px;
	font-size: 14px;
	line-height: 1.4;
	min-height: 42px;
}

/* --- Bulk CSV upload zone -------------------------------------------------*/

.cc-org-bulk-form { margin: 0; }

.cc-org-upload {
	display: block;
	border: 2px dashed var(--color-border);
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	background: var(--color-primary-tint);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.cc-org-upload:hover,
.cc-org-upload.is-dragging { border-color: var(--color-primary); }

.cc-org-upload.has-file { border-color: #1A7A4B; background: #E8F5EE; }

.cc-org-upload input[type="file"] {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* `.cc-org-upload` already has `text-align: center`, but the SVG was
 * still hugging the left in some browsers — making it `display: block`
 * with auto horizontal margins is the bullet-proof centering recipe
 * (Ash, 4 May 2026, screenshot review). Same applies to the empty-state
 * envelope above. */
.cc-org-upload__inner svg {
	color: #3388AC;
	display: block;
	margin: 0 auto 12px;
}

.cc-org-upload__text {
	font-size: 15px;
	color: var(--color-text-body);
	margin-bottom: 4px;
}

.cc-org-upload__hint {
	font-size: 13px;
	color: var(--color-text-muted);
}

.cc-org-upload__filename {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1A5C3A;
}

/* Small button modifier for "Download CSV template" --------------------- */

.btn--sm { padding: 8px 16px; font-size: 14px; }

/* --- Action links (Resend / Revoke per row) -------------------------------*/

.cc-org-action-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.cc-org-action-link {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	cursor: pointer;
	transition: color 0.15s;
}

.cc-org-action-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.cc-org-action-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.cc-org-action-divider {
	color: #C4C5C7;
	margin: 0 4px;
	font-size: 12px;
}

/* --- Bulk error summary ---------------------------------------------------*/

.cc-org-bulk-errors {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
}

.cc-org-bulk-errors summary {
	font-weight: 600;
	color: var(--color-text-heading);
	cursor: pointer;
	list-style-position: inside;
}

.cc-org-bulk-errors ul {
	margin: 12px 0 0 24px;
	padding: 0;
	font-size: 14px;
	color: var(--color-text-body);
	line-height: 1.6;
}

/* ============================================================================
 * Stage 5 — Invitation Acceptance landing
 * ============================================================================ */

.cc-accept-page {
	background: #FAFAFA;
	min-height: calc(100vh - 80px);
	padding: 64px 24px;
}

.cc-accept-page__inner {
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.cc-accept-head { margin-bottom: 24px; }

.cc-accept-head h1 {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0 0 8px;
	line-height: 1.2;
}

.cc-accept-head p {
	font-size: 16px;
	color: var(--color-text-body);
	line-height: 1.5;
	margin: 0;
}

.cc-accept-form { margin: 24px 0 16px; }

.cc-accept-foot {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #F0F0F1;
	font-size: 14px;
	color: var(--color-text-muted);
}

.cc-accept-foot a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Inline registration form (state H) ----------------------------------- */

.cc-accept-register { margin-top: 8px; }

.cc-accept-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 540px) {
	.cc-accept-row { grid-template-columns: 1fr; }
}

.cc-accept-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.cc-accept-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-heading);
}

.cc-accept-field input[type="email"],
.cc-accept-field input[type="text"],
.cc-accept-field input[type="password"] {
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: #fff;
	color: var(--color-text-body);
	outline: none;
	transition: border-color 0.15s;
}

.cc-accept-field input:focus { border-color: var(--color-primary); }
.cc-accept-field input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.cc-accept-field--locked input {
	background: #FAFAFA;
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.cc-accept-field small {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* Flash error toast ----------------------------------------------------- */

.cc-accept-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 24px;
	background: #FCEAE7;
	color: #8B2818;
	border-left: 3px solid #C23B22;
	font-size: 14px;
}

.cc-accept-error svg {
	flex-shrink: 0;
	color: #C23B22;
	margin-top: 1px;
}

/* ============================================================================
 * Stage 6 — Learner Progress
 * ============================================================================ */

/* Push the Export button to the right side of the filter bar */
.cc-org-filterbar__spacer { flex: 1; }

/* Sub-line under name showing email — used in the progress table */
.cc-org-table__email-sub {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* ============================================================================
 * Stage 7 — Top-up Purchase
 * ============================================================================ */

.cc-org-purchase__layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 1100px) {
	.cc-org-purchase__layout { grid-template-columns: 1fr; }
}

.cc-org-purchase__left { min-width: 0; }

.cc-org-pricing-note {
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--color-primary-tint);
	border-left: 3px solid #3388AC;
	border-radius: 6px;
	font-size: 14px;
	color: var(--color-text-body);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.cc-org-pricing-note svg {
	flex-shrink: 0;
	color: #3388AC;
	margin-top: 2px;
}

.cc-org-bespoke {
	margin-top: 24px;
	padding: 20px 24px;
	background: var(--color-primary-tint);
	border-radius: 12px;
	border: 1px solid #D6E5EE;
}

.cc-org-bespoke p {
	font-size: 14px;
	color: var(--color-text-body);
	line-height: 1.6;
	margin: 0;
}

.cc-org-bespoke a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* Order Summary card -------------------------------------------------------*/

.cc-org-order-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 32px;
}

.cc-org-order-card__title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text-heading);
	margin-bottom: 20px;
}

.cc-org-order-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	font-size: 14px;
	gap: 12px;
}

.cc-org-order-row__label { color: var(--color-text-muted); }
.cc-org-order-row__value {
	font-weight: 600;
	color: var(--color-text-heading);
	text-align: right;
	max-width: 60%;
	overflow-wrap: anywhere;
}

.cc-org-order-row--total { padding: 12px 0; }

.cc-org-order-row__total-label {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text-heading);
}

.cc-org-order-row__total-value {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary);
}

.cc-org-order-divider {
	height: 1px;
	background: var(--color-border);
	margin: 6px 0;
}

/* Consent checkboxes inside the order card ---------------------------------*/

.cc-org-consent {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}

.cc-org-consent__row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--color-text-body);
	line-height: 1.5;
	cursor: pointer;
}

.cc-org-consent__row:last-of-type { margin-bottom: 0; }

.cc-org-consent__row input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--color-primary);
}

.cc-org-consent__row a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cc-org-order-card__submit {
	width: 100%;
	margin-top: 20px;
}

.cc-org-payment-alt {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
}

.cc-org-payment-alt:hover { text-decoration: underline; }

/* Disabled-style readonly inputs on the topup page ------------------------- */

.cc-org-purchase .cc-org-field input[disabled] {
	background: #FAFAFA;
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.cc-org-purchase .cc-org-field small {
	font-size: 12px;
	color: var(--color-text-muted);
}