.learning-overview { display: grid; gap: 1rem; }
.learning-summary { margin-block: .7rem; font-weight: var(--w-medium); }
.learning-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-block: 1.25rem; }
.learning-ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .85rem; }
.learning-ticket { min-width: 0; margin: 0; }
.learning-ticket__button { display: flex; flex-direction: column; gap: .65rem; width: 100%; min-height: 10.25rem; padding: 1.15rem; border: 1px solid var(--c-line-strong); border-radius: 1.1rem; background: var(--c-surface); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.learning-ticket__button:hover { border-color: var(--c-brand); background: var(--c-brand-tint); }
.learning-ticket__button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.learning-ticket__number { font-size: var(--fs-h3); font-weight: var(--w-medium); }
.learning-ticket__status { font-size: var(--fs-small); color: var(--c-ink-muted); }
.learning-ticket__action { display: flex; justify-content: space-between; margin-top: auto; color: var(--c-link); font-weight: var(--w-medium); }
.learning-ticket[data-ticket-state=correct] .learning-ticket__button { border-color: var(--c-ok-ink); background: var(--c-ok-tint); }
.learning-ticket[data-ticket-state=correct] .learning-ticket__status { color: var(--c-ok-ink); }
.learning-ticket[data-ticket-state=mistakes] .learning-ticket__status { color: var(--c-wait-ink); background: var(--c-wait-tint); padding: .15rem .4rem; border-radius: .35rem; align-self: flex-start; }
@media (max-width: 480px) {
  .learning-ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .learning-ticket__button { padding: .8rem; min-height: 10.5rem; border-radius: .8rem; gap: .5rem; }
  .learning-ticket__number { font-size: 1rem; }
  .learning-ticket__status { font-size: .8rem; line-height: 1.4; }
  .learning-ticket__action { font-size: .9rem; }
  .learning-overview .btn-row, .learning-overview form, .learning-overview .btn { width: 100%; }
}

.learning-materials { margin-top: 1.5rem; overflow-wrap: anywhere; }
.learning-material { padding-block: 1rem; border-top: 1px solid var(--c-line-strong); }
.learning-material summary { cursor: pointer; font-weight: var(--w-medium); line-height: 1.5; }
.learning-material summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }