/* Zornux Academy — the learning platform's own surface, layered on the design tokens.
   Everything references the shared CSS variables (color, space, radius, shadow), so it
   is theme-aware (light/dark) by construction and never hardcodes a raw color. Scoped
   to `academy-` classes so it cannot leak into the marketing site. */

/* ---- Hero ---- */
.academy-hero {
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
  max-width: var(--layout-content-width-narrow);
  margin-inline: auto;
}
.academy-hero__title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: var(--space-3) 0;
}
.academy-hero__lead {
  color: var(--color-text-secondary);
}
.academy-hero__cta {
  justify-content: center;
  margin-top: var(--space-5);
}
.academy-hero__release {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.academy-hero__release strong {
  color: var(--color-brand);
}

/* ---- Card grid + cards ---- */
.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-5);
}

.academy-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.academy-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}
.academy-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.academy-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.academy-card__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  margin: var(--space-1) 0 0;
}
.academy-card__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}
.academy-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.academy-card__tech {
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}
.academy-card__icon {
  font-size: var(--font-size-xl);
  color: var(--color-brand);
}
.academy-card__icon--inline {
  font-size: var(--font-size-2xl);
}
.academy-card--path {
  background: var(--gradient-surface);
}

.academy-more {
  margin-top: var(--space-5);
  font-weight: var(--font-weight-medium);
}
.academy-more a {
  text-decoration: none;
}

/* ---- Pills / badges ---- */
.academy-pill {
  display: inline-block;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}
.academy-pill--beginner {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
}
.academy-pill--intermediate {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning);
}
.academy-pill--advanced {
  background: color-mix(in srgb, var(--color-error) 14%, transparent);
  color: var(--color-error);
}
.academy-pill--featured {
  background: color-mix(in srgb, var(--color-brand) 16%, transparent);
  color: var(--color-brand);
}

/* ---- Catalog header + filters ---- */
.academy-catalog__header {
  padding: var(--space-6) 0 var(--space-5);
}
.academy-catalog__header h1 {
  margin-bottom: var(--space-2);
}
.academy-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.academy-filter__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.academy-chip {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}
.academy-chip:hover {
  border-color: var(--color-brand);
}
.academy-chip--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-contrast);
}
.academy-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.academy-empty {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
}

/* ---- Detail (course + path) ---- */
.academy-detail__header {
  padding: var(--space-5) 0 var(--space-4);
}
.academy-detail__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.academy-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.academy-prose {
  max-width: var(--layout-content-width-narrow);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}
.academy-prereq {
  margin-top: var(--space-6);
}
.academy-prereq h2 {
  font-size: var(--font-size-xl);
}

/* ---- Curriculum ---- */
.academy-curriculum {
  margin-top: var(--space-7);
}
.academy-modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.academy-module {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
}
.academy-module__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.academy-module__num {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
}
.academy-module__title {
  font-size: var(--font-size-lg);
  margin: 0;
}
.academy-module__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: var(--space-1) 0 0;
}
.academy-lessons {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.academy-lesson-row a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  border-top: var(--border-width) solid var(--color-border);
  transition: background var(--transition-fast);
}
.academy-lesson-row:first-child a {
  border-top: none;
}
.academy-lesson-row a:hover {
  background: var(--color-surface-2);
}
.academy-lesson-row__type {
  color: var(--color-brand);
}
.academy-lesson-row__title {
  flex: 1;
}
.academy-lesson-row__time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Tags ---- */
.academy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.academy-tags__item {
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.academy-detail__tags {
  margin-top: var(--space-7);
}

/* ---- Lesson viewer ---- */
.academy-lesson {
  padding: var(--space-5) 0 var(--space-8);
}
.academy-lesson__header {
  margin-bottom: var(--space-5);
}
.academy-lesson__kicker {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.academy-lesson__video {
  margin: var(--space-4) 0;
}
.academy-lesson__body {
  max-width: var(--layout-content-width-narrow);
  color: var(--color-text);
}
.academy-lesson__links {
  margin-top: var(--space-6);
  max-width: var(--layout-content-width-narrow);
}
.academy-lesson__links ul {
  padding-left: var(--space-5);
}

/* ---- Markdown blocks ---- */
.md-h {
  line-height: var(--line-height-snug);
  margin: var(--space-6) 0 var(--space-3);
}
.md-h1 {
  font-size: var(--font-size-2xl);
}
.md-h2 {
  font-size: var(--font-size-xl);
}
.md-h3 {
  font-size: var(--font-size-lg);
}
.md-h4 {
  font-size: var(--font-size-base);
}
.md-p {
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-normal);
}
.md-list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  line-height: var(--line-height-normal);
}
.md-list li {
  margin-bottom: var(--space-2);
}
.md-quote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-left: var(--border-width-thick) solid var(--color-brand);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.md-hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-6) 0;
}
.md-inline-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.md-code {
  margin: 0 0 var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.md-code__lang {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.md-code__pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* ---- Learning-path steps ---- */
.academy-path-courses {
  margin-top: var(--space-7);
}
.academy-path-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.academy-path-step {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}
.academy-path-step__num {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
}
.academy-path-step__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.academy-path-step__body:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}
.academy-path-step__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}
.academy-path-step__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.academy-path-step__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Not-found ---- */
.academy-notfound {
  padding: var(--space-8) 0;
  text-align: center;
  max-width: var(--layout-content-width-narrow);
  margin-inline: auto;
}
.academy-notfound .cta-row {
  justify-content: center;
  margin-top: var(--space-5);
}

/* ---- Progress bar ---- */
.academy-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.academy-progress__track {
  flex: 1;
  height: 0.5rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.academy-progress__fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.academy-progress__label {
  flex: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.academy-detail__progress {
  margin-top: var(--space-4);
  max-width: 28rem;
}

/* ---- Learner controls (on a lesson) ---- */
.academy-learner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.academy-learner--anon {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.academy-learner--anon p {
  margin: 0;
}
.academy-learner__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
}
.academy-learner__loading {
  color: var(--color-text-muted);
}

/* ---- Student dashboard ---- */
.academy-dash__header {
  padding: var(--space-6) 0 var(--space-5);
}
.academy-dash__header h1 {
  margin-bottom: var(--space-2);
}
.academy-dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.academy-stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.academy-stat__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-brand);
}
.academy-stat__unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.academy-stat__label {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.academy-continue {
  margin-bottom: var(--space-6);
}
.academy-continue__kicker {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}
.academy-continue__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--gradient-surface);
  border: var(--border-width) solid var(--color-brand);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast);
}
.academy-continue__card:hover {
  box-shadow: var(--shadow-md);
}
.academy-continue__course {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.academy-continue__lesson {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}
.academy-continue__go {
  margin-top: var(--space-2);
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
}

.academy-dash__section {
  margin-bottom: var(--space-6);
}
.academy-dash__section h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-4);
}
.academy-dash__courses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.academy-enrollment__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}
.academy-enrollment__body:hover {
  border-color: var(--color-brand);
}
.academy-enrollment__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.academy-enrollment__title {
  font-weight: var(--font-weight-semibold);
}
.academy-dash__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.academy-dash__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.academy-dash__list li:first-child a {
  border-top: none;
}
.academy-dash__list a:hover {
  background: var(--color-surface-2);
}
.academy-dash__list-title {
  flex: 1;
}
.academy-dash__list-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.academy-dash__check {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}
.academy-dash__empty {
  padding: var(--space-8) 0;
  text-align: center;
  max-width: var(--layout-content-width-narrow);
  margin-inline: auto;
}
.academy-dash__empty .cta-row {
  justify-content: center;
  margin-top: var(--space-5);
}

/* ---- Quizzes: course listing ---- */
.academy-course-quizzes {
  margin-top: var(--space-7);
}
.academy-quiz-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.academy-quiz-row a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}
.academy-quiz-row a:hover {
  border-color: var(--color-brand);
}
.academy-quiz-row__title {
  font-weight: var(--font-weight-semibold);
}
.academy-quiz-row__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Quiz taking ---- */
.academy-quiz__header {
  padding: var(--space-5) 0 var(--space-4);
}
.academy-quiz__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.academy-quiz__questions {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--layout-content-width-narrow);
}
.academy-question {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.academy-question__prompt {
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-4);
}
.academy-question__num {
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-1);
}
.academy-question__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.academy-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.academy-choice:hover {
  border-color: var(--color-border-strong);
}
.academy-question__text {
  width: 100%;
  max-width: 24rem;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
}
.academy-question__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.academy-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.academy-slot__pos {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  width: 1.5rem;
}
.academy-slot__select {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}
.academy-quiz__error {
  color: var(--color-error);
  margin-bottom: var(--space-3);
}

/* ---- Quiz result / review ---- */
.academy-quiz__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  border: var(--border-width) solid var(--color-border);
}
.academy-quiz__result.is-pass {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: var(--color-success);
}
.academy-quiz__result.is-fail {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-color: var(--color-warning);
}
.academy-quiz__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.academy-quiz__score-num {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.academy-quiz__score-badge {
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-sm);
}
.is-pass .academy-quiz__score-badge {
  color: var(--color-success);
}
.is-fail .academy-quiz__score-badge {
  color: var(--color-warning);
}
.academy-quiz__score-detail {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.academy-quiz__review {
  max-width: var(--layout-content-width-narrow);
}
.academy-quiz__review ol {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.academy-review {
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-left-width: var(--border-width-thick);
  border-radius: var(--radius-md);
}
.academy-review.is-right {
  border-left-color: var(--color-success);
}
.academy-review.is-wrong {
  border-left-color: var(--color-error);
}
.academy-review__mark {
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-1);
}
.is-right .academy-review__mark {
  color: var(--color-success);
}
.is-wrong .academy-review__mark {
  color: var(--color-error);
}
.academy-review__prompt {
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-2);
}
.academy-review__answer {
  margin: 0;
  font-size: var(--font-size-sm);
}
.academy-review__explain {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Quiz attempt history ---- */
.academy-quiz__history {
  margin-top: var(--space-7);
  max-width: var(--layout-content-width-narrow);
}
.academy-quiz__history ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
}
.academy-quiz__attempt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}
.academy-quiz__attempt:first-child {
  border-top: none;
}
.academy-quiz__attempt-score {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  width: 3rem;
}
.academy-quiz__attempt.is-pass .academy-quiz__attempt-verdict {
  color: var(--color-success);
}
.academy-quiz__attempt.is-fail .academy-quiz__attempt-verdict {
  color: var(--color-text-muted);
}
.academy-quiz__attempt-time {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Coding exercises ---- */
.academy-exercise__problem,
.academy-exercise__code,
.academy-exercise__expected,
.academy-exercise__hints,
.academy-exercise__solution {
  margin-top: var(--space-6);
  max-width: var(--layout-content-width-narrow);
}
.academy-exercise__code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.academy-exercise__code-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.academy-exercise__signin {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.academy-hints {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.academy-hint {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.academy-hint__num {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
}
.academy-exercise__reveal {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.academy-exercise__reveal p {
  margin: 0 0 var(--space-3);
}

/* ---- Certificates ---- */
.academy-dash__links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.academy-dash__link {
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

/* ---- Achievements ---- */
.academy-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}
.academy-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.academy-badge.is-earned {
  border-color: var(--color-brand);
  background: var(--gradient-surface);
}
.academy-badge.is-locked {
  opacity: 0.65;
}
.academy-badge__icon {
  font-size: 2.5rem;
  line-height: 1;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
}
.academy-badge.is-earned .academy-badge__icon {
  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
}
.academy-badge__title {
  font-size: var(--font-size-lg);
  margin: var(--space-1) 0 0;
}
.academy-badge__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}
.academy-badge__status {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
}
.academy-badge__earned {
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
}
.academy-badge__locked {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.academy-cert-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.academy-cert-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.academy-cert-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* The branded certificate. A fixed aspect landscape card with a gradient border. */
.academy-cert {
  container-type: inline-size;
}
.academy-cert__frame {
  position: relative;
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: #0b0e1a;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(120deg, #2f80f0, #6c3ce0);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-md);
}
.academy-cert__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.academy-cert__mark .zx-mark {
  display: block;
  border-radius: var(--radius-md);
}
.academy-cert__issuer {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.academy-cert__issuer-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: #0b0e1a;
}
.academy-cert__issuer-org {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: #6c3ce0;
}
.academy-cert__eyebrow {
  font-size: var(--font-size-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6c3ce0;
  margin-bottom: var(--space-4);
}
.academy-cert__presented {
  color: #4a4a5a;
  margin: var(--space-2) 0;
  font-size: var(--font-size-sm);
}
.academy-cert__name {
  font-size: var(--font-size-3xl);
  line-height: 1.1;
  color: #0b0e1a;
  margin: var(--space-2) 0;
}
.academy-cert__course {
  font-size: var(--font-size-xl);
  color: #2f80f0;
  margin: var(--space-2) 0 0;
}
.academy-cert__release {
  color: #6b6b80;
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}
.academy-cert__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid #e2e2ec;
}
.academy-cert__foot-item {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.academy-cert__foot-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: #6b6b80;
}
.academy-cert__foot-value {
  font-weight: var(--font-weight-semibold);
  color: #0b0e1a;
}
.academy-cert__id {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
.academy-cert__verify {
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: #6b6b80;
}
.academy-cert__verify-url {
  font-family: var(--font-mono);
  word-break: break-all;
}

/* Public verification banner */
.academy-verify-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
  border: var(--border-width) solid var(--color-border);
}
.academy-verify-banner.is-valid {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: var(--color-success);
}
.academy-verify-banner.is-invalid {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border-color: var(--color-error);
}
.academy-verify-banner__mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: #fff;
}
.is-valid .academy-verify-banner__mark {
  background: var(--color-success);
}
.is-invalid .academy-verify-banner__mark {
  background: var(--color-error);
}
.academy-verify-banner__title {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}
.academy-verify-banner__sub {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Print: isolate the chosen certificate so save-as-PDF yields just the certificate. */
@media print {
  body.is-printing-cert * {
    visibility: hidden;
  }
  body.is-printing-cert .print-target .academy-cert,
  body.is-printing-cert .print-target .academy-cert * {
    visibility: visible;
  }
  body.is-printing-cert .print-target .academy-cert {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  body.is-printing-cert .academy-cert__frame {
    box-shadow: none;
  }
}

/* ---- Search ---- */
.academy-search__input {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--font-size-lg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.academy-search__input:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}
.academy-search__count {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.academy-search__group {
  margin-bottom: var(--space-6);
}
.academy-search__group h2 {
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.academy-search__group-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}
.academy-results {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
}
.academy-result a,
.academy-result--static {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}
.academy-result:first-child a,
.academy-result--static:first-child {
  border-top: none;
}
.academy-result a:hover {
  background: var(--color-surface-2);
}
.academy-result__title {
  font-weight: var(--font-weight-medium);
}
.academy-result__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Instructor portal ---- */
.academy-instr-new {
  margin: var(--space-5) 0;
}
.academy-instr-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 40rem;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-5);
}
.academy-instr-form--inline {
  margin: var(--space-3) 0;
  background: var(--color-bg);
}
.academy-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.academy-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.academy-field__input {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: inherit;
}
.academy-field__input:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}
.academy-field__textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
.academy-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
.academy-instr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.academy-instr-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  flex-wrap: wrap;
}
.academy-instr-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
}
.academy-instr-row__title {
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-text);
}
.academy-instr-row__title:hover {
  color: var(--color-brand);
}
.academy-instr-row__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.academy-instr-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.academy-reorder {
  display: inline-flex;
  gap: var(--space-1);
}
.academy-lesson-row--instr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}
.academy-add-lesson {
  margin-top: var(--space-3);
}
.academy-analytics__searches {
  margin-top: var(--space-4);
}
.academy-analytics__searches ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}
.academy-analytics__searches li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

/* ---- Sign-in required ---- */
.academy-signin {
  padding: var(--space-8) 0;
  text-align: center;
  max-width: var(--layout-content-width-narrow);
  margin-inline: auto;
}
.academy-signin .cta-row {
  justify-content: center;
  margin-top: var(--space-5);
}

@media (max-width: 40rem) {
  .academy-grid {
    grid-template-columns: 1fr;
  }
  .academy-path-step {
    gap: var(--space-3);
  }
}