/* Lesson selection only. Artwork and Environment colors use the Library's shared sources. */
#class-form #class-results .lesson-game-picker-grid {
  grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr));
  align-items: stretch;
  gap: 20px;
}
#class-form #class-results .lesson-picker-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--surface-primary);
  box-shadow: none;
}
#class-form #class-results .lesson-picker-media {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}
#class-form #class-results .lesson-picker-media .environment-artwork {
  display: grid;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#class-form #class-results .lesson-picker-media .environment-artwork::before { display: none; }
#class-form #class-results .lesson-picker-media img {
  object-fit: cover;
  object-position: center 48%;
  image-rendering: pixelated;
}
#class-form #class-results .lesson-picker-copy {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  gap: 10px;
  padding: 16px 16px 12px;
}
#class-form #class-results .lesson-picker-copy h4 {
  margin: 0;
  color: var(--text-primary);
  font: 800 calc(1rem * var(--text-reading-scale))/1.4 var(--font-body);
  overflow-wrap: anywhere;
}
#class-form #class-results .program-meta { gap: 8px; }
#class-form #class-results .lesson-picker-classification {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
}
#class-form #class-results .lesson-picker-meta-label {
  color: var(--text-secondary);
  font: 600 calc(.6875rem * var(--text-reading-scale))/1.4 var(--font-body);
}
#class-form #class-results :is(.framework-item-badge,.focus-subject-tag) {
  max-width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--framework-accent,var(--metadata-color));
  color: #181521 !important;
  box-shadow: none;
  font: 700 var(--text-xs)/1.2 'DM Mono',monospace;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
#class-form #class-results .lesson-picker-lens {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
#class-form #class-results .lesson-picker-lens strong {
  color: var(--text-primary);
  font: 700 calc(.8125rem * var(--text-reading-scale))/1.4 var(--font-body);
  overflow-wrap: anywhere;
  white-space: normal;
}
#class-form #class-results .lesson-game-usage { margin: 0; color: var(--text-primary); }
#class-form #class-results .lesson-game-picker-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: stretch;
  width: auto;
  max-width: 100%;
  gap: 8px;
  margin-top: auto;
  padding: 0 16px 16px;
}
#class-form #class-results .lesson-game-picker-actions button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
}
#class-form #class-results .lesson-picker-add {
  flex: 1 1 120px;
  border-color: transparent;
  background: var(--accent-pink);
  color: var(--control-on-accent);
}
#class-form #class-results .lesson-picker-add:disabled { opacity: .55; }
#class-form #class-results .lesson-game-picker-actions button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}