/* Recommendations: the student's "Recommended for you" strip, reason chips and the lesson thumbs. */
.recstrip__list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.reccard {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-sunken);
}
.reccard__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.reccard__evidence { margin: 0; }
.reccard__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 4px; }
.reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.tag--reason { background: var(--primary-soft); color: var(--primary-ink); }
html[data-theme="dark"] .tag--reason { background: #2a1d2e; color: #f0a6b4; }
.thumbs { margin-top: var(--space-3); }
.suggest { display: grid; gap: var(--space-2); }
.suggest__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.suggest__body { min-width: 0; display: grid; gap: 2px; }
.suggest__title { font-size: 13.5px; line-height: 18px; font-weight: 600; }
@media (max-width: 560px) { .suggest__row { grid-template-columns: 1fr; } }