/* Courses tab — catalog: one card per course-registry.js entry.
   docs/spec-multi-course-catalog.md, 2026-09-25. The toggle round-trips
   GET/POST /api/practice/course-shares (courses.js); "View course" swaps
   in #courses-detail-view, styled by detail.css/modal.css. */

.course-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
/* `display: grid` above beats the UA's [hidden] rule — courses.js swaps the
   two views with the `hidden` attribute, so restate it or both show. */
.course-catalog-grid[hidden],
.courses-detail-view[hidden] {
  display: none;
}

.course-catalog-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.course-catalog-card-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.course-catalog-card-eyebrow {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.course-catalog-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-catalog-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}

.course-catalog-toggle input {
  cursor: pointer;
}

.course-catalog-view-btn {
  padding: 7px 12px;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.course-catalog-view-btn:hover {
  filter: brightness(1.08);
}

/* Delta Drills detail: one row per concept, stacked (not the hero's
   wrapping .course-sources link bar). A row jumps to the Knowledge Graph. */
.course-lesson-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.course-lesson-item {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.course-lesson-item:hover {
  border-color: var(--accent);
}