/* Courses in the Edukors Graph standard: the listing, and the framed player.
   The look follows the legacy course listing, so the move was not felt as a
   redesign. Everything inside the frame is styled by the player itself. */

.courses-root {
  width: 100%;
  height: 100%;
}

.courses {
  width: 100%;
  height: 100%;
  color: var(--theme-text-primary);
}

/* --- the listing ------------------------------------------------------- */

/* The listing grows with its cards instead of filling the frame as the player
   does: at a fixed height the bottom padding would sit at the fold and be
   scrolled past, leaving the last row flush against the end of the scroll. */
.courses--list {
  height: auto;
  padding-bottom: var(--theme-space-8);
}

.courses-section {
  margin-bottom: var(--theme-space-6);
}

.courses-section-title {
  margin: 0 0 var(--theme-space-4);
  padding-bottom: var(--theme-space-3);
  border-bottom: 2px solid var(--theme-color-primary);
  font-size: var(--theme-font-lg);
  font-weight: 700;
  color: var(--theme-text-primary);
}

.courses-section-description {
  margin: calc(-1 * var(--theme-space-2)) 0 var(--theme-space-4);
  font-size: var(--theme-font-sm);
  line-height: 1.5;
  color: var(--theme-text-secondary);
}

.courses-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--theme-space-4);
}

.courses-course-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--theme-space-2);
  padding: var(--theme-space-5);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-surface-raised);
  color: var(--theme-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.courses-course-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-color-primary);
  box-shadow: var(--theme-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.courses-course-icon {
  display: inline-flex;
  color: var(--theme-color-primary);
}

.courses-course-title {
  font-size: var(--theme-font-md);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1.35;
}

.courses-course-description {
  font-size: var(--theme-font-sm);
  line-height: 1.5;
  color: var(--theme-text-secondary);
}

.courses-course-badge {
  padding: var(--theme-space-1) var(--theme-space-2);
  border-radius: var(--theme-radius-full);
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-xs);
  font-weight: var(--theme-font-weight-semibold);
}

/* Progress bar: the player's estimate of how far along the learner is. */
.courses-course-progress {
  display: flex;
  align-items: center;
  gap: var(--theme-space-2);
  width: 100%;
  margin-top: auto;
}

.courses-course-progress-track {
  flex: 1;
  height: 6px;
  border-radius: var(--theme-radius-pill, 999px);
  background: var(--theme-surface-sunken, var(--theme-border-subtle));
  overflow: hidden;
}

.courses-course-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--theme-color-primary);
  transition: width 0.3s ease;
}

.courses-course-progress--complete .courses-course-progress-fill {
  background: var(--theme-color-success, #16a34a);
}

.courses-course-progress-label {
  flex: 0 0 auto;
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-xs);
  font-weight: var(--theme-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.courses-course-progress--complete .courses-course-progress-label {
  color: var(--theme-color-success, #16a34a);
}

.courses-course-card.is-complete {
  border-color: color-mix(in srgb, var(--theme-color-success, #16a34a) 45%, var(--theme-border-subtle));
}

/* Feedback row under the progress bar: like, dislike and comment. */
.courses-course-actions {
  display: flex;
  align-items: center;
  gap: var(--theme-space-1);
  padding-top: var(--theme-space-1);
}

.courses-course-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-1);
  padding: var(--theme-space-1);
  border: 1px solid transparent;
  border-radius: var(--theme-radius-md);
  background: transparent;
  color: var(--theme-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.courses-course-action:hover {
  border-color: var(--theme-border-subtle);
  background: var(--theme-surface-sunken, var(--theme-border-subtle));
  color: var(--theme-color-primary);
}

.courses-course-action.is-active {
  color: var(--theme-color-primary);
}

/* How many the course received, beside the icon. */
.courses-course-action-count {
  font-size: var(--theme-font-xs);
  font-weight: var(--theme-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.courses-course-action:focus-visible,
.courses-course-card:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

.courses-empty {
  margin: 0;
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-sm);
}

/* --- the player -------------------------------------------------------- */

.courses--player {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--theme-space-4);
}

.courses-player-header {
  display: flex;
  align-items: center;
  gap: var(--theme-space-3);
}

.courses-back {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-space-2);
  padding: var(--theme-space-2) var(--theme-space-3);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-md);
  background: var(--theme-surface-raised);
  color: var(--theme-text-primary);
  font: inherit;
  font-size: var(--theme-font-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.courses-back:hover {
  border-color: var(--theme-color-primary);
  color: var(--theme-color-primary);
}

.courses-player-heading {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--theme-font-lg);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The frame with a spinner over it, while a gallery course is fetched. The
   stage takes the frame's grid row, so the frame keeps its full height. */
.courses-player-stage {
  position: relative;
  min-height: 0;
}

.courses-player-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-bg-secondary);
}

/* The player draws its own page, background included, so the frame only has to
   give it the room and stay out of the way. The rounded border is the app's,
   not the player's: it keeps a full-bleed page from looking pasted on. */
.courses-player-frame {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-bg-secondary);
}