/**
 * styles/academy.css — Fresh Academy surfaces (P09-1).
 * Course catalogue (#/academy) + in-shell course player (#/academy/:course).
 * Phone-first (single column, no horizontal scroll ≤768px, AC7); tokens only,
 * no raw hex; consumes the frozen .level-ring (ringNode) + .card/.chip/.btn hooks.
 */

/* ── phone-first tap targets (AC7/§10) ──────────────────────────────────────*/
/* Academy is a MEMBER surface: lift the base .btn/.chip CTAs to the 44px touch
   bar (course-card Enrol/Continue/Start, onboarding CTA, nudge-preview, category
   chips, and the player Enrol/Mark-complete/Prev/Next + "Open in Fresh LMS"), the
   same scoped pattern the sibling member surfaces use. Never touches base .btn. */
.view-academy .btn, .view-academy .chip, .view-course-player .btn { min-height: 44px; }

/* ── catalogue controls ─────────────────────────────────────────────────────*/
.academy-onboarding { margin-bottom: var(--sp-5); display: grid; gap: var(--sp-2); }
.academy-onboarding .btn { justify-self: start; margin-top: var(--sp-1); }

.academy-controls {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; margin-bottom: var(--sp-4);
}
.academy-search { position: relative; flex: 1 1 240px; min-width: 0; display: block; }
.academy-search .input { width: 100%; padding-left: 2.4em; }
.academy-search__ico {
  position: absolute; left: 0.8em; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.academy-cats { flex: 1 1 100%; }

/* ── course grid ────────────────────────────────────────────────────────────*/
.course-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }

.course-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.course-card__cat { align-self: flex-start; }
.course-card__title { margin: 0; }
.course-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25em; margin: 0; }
.course-card__body {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-2);
}
.course-card__ring { flex-shrink: 0; }
.course-card__status { min-width: 0; }
.course-card__actions { flex-wrap: wrap; gap: var(--sp-2); }

/* ── player ─────────────────────────────────────────────────────────────────*/
.player-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.player-topbar__title { font-family: var(--font-head); font-weight: 700; min-width: 0; }
.player-topbar__progress { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: 0.9em; }
.player-topbar__ring { flex-shrink: 0; }

.player-body { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .player-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }

.lesson-pane { display: grid; gap: var(--sp-3); }
.lesson-pane__title { margin: 0; }
.lesson-pane__subhead { margin: 0; font-size: 0.95em; }
.lesson-pane__actions, .lesson-pane__nav { flex-wrap: wrap; gap: var(--sp-2); }
.lesson-pane__nav { justify-content: space-between; }

.lesson-poster {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius); color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
}
.lesson-poster__play {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.25);
}
.lesson-poster__play .fa-icon { transform: rotate(90deg); font-size: 1.4rem; }
.lesson-poster__note { font-size: 0.8em; opacity: 0.9; }

.lesson-transcript { line-height: 1.6; }

.lesson-sidebar { display: grid; gap: var(--sp-3); align-content: start; }
.lesson-sidebar__head { margin: 0; font-size: 1.05em; }
.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lesson-list__item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2); border-radius: var(--radius-sm);
  min-height: 44px; cursor: pointer;
}
.lesson-list__item:hover:not(.is-locked) { background: var(--surface-2); }
.lesson-list__item.is-active { background: var(--surface-2); font-weight: 600; }
.lesson-list__item.is-done .lesson-list__label { color: var(--muted); }
.lesson-list__item.is-locked { cursor: not-allowed; opacity: 0.55; }
.lesson-list__mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); font-size: 0.7em;
}
.lesson-list__item.is-done .lesson-list__mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lesson-list__item.is-active .lesson-list__mark { border-color: var(--accent); color: var(--accent); }
.lesson-list__label { min-width: 0; flex: 1; }
.lesson-list__dur { margin-left: auto; color: var(--muted); font-size: 0.8em; flex-shrink: 0; }

.lms-deeplink { margin-top: var(--sp-1); }
.lms-note { margin: 0; }

/* ── nudge demo control ─────────────────────────────────────────────────────*/
.academy-demo { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
.academy-demo__row { flex-wrap: wrap; gap: var(--sp-2); }