.learning-badge {
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
  border: 1px solid currentColor;
  border-radius: .6rem;
  font-size: .82rem;
  line-height: 1.45;
  font-weight: 650;
  color: #d3dce8;
  background: #172235;
  white-space: normal;
}
.learning-mastered { color: #9cf0c9; background: #153329; }
.learning-consolidate { color: #ffda99; background: #352b1b; }
.learning-completed { color: #b6d7ff; background: #192e46; }
.hub-resource-meta { flex-wrap: wrap; }
.hub-resource-meta .learning-badge { flex-basis: 100%; width: fit-content; }
.levels-level-copy .learning-badge { margin-top: .7rem; font-style: normal; }
.learning-session-summary { margin: .8rem 0 0; font-size: .9rem; line-height: 1.6; }
.learning-list { display: grid; gap: .65rem; }
.learning-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem; border: 1px solid var(--border, #334155); border-radius: .8rem; }
.learning-row a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-weight: 650; }
.learning-row a:hover { text-decoration: underline; }
.learning-row a:focus-visible { outline: 2px solid #9ccaff; outline-offset: 3px; }
.learning-detail, .learning-explanation { font-size: .9rem; line-height: 1.65; color: var(--muted, #c0cad7); }
.learning-panel { margin-top: 1rem; }
@media (max-width: 600px) {
  .learning-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .learning-row > div { min-width: 0; overflow-wrap: anywhere; }
}