/* Small square steps bring the path into the existing subject cards. */
/* Legacy .card and .card-body each add their own padding. Use one inset here. */
.learning-path-unit.card { padding: 0; }
.learning-path-unit > .card-body, .learning-path-unit > .card-header { padding: 1.25rem; }
.learning-path { --path-turn: 32px; --path-ink: #38516c; }
.learning-path__list { list-style: none; margin: 0; padding: 0; }
.learning-path__step { position: relative; padding: 0 0 .85rem; }
.learning-path__step:last-child { padding-bottom: 0; }
.learning-path__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: -20px;
  width: var(--path-turn);
  border-left: 3px dashed #c3cdd8;
  border-bottom: 3px dashed #c3cdd8;
  pointer-events: none;
}
.learning-path__step:nth-child(even)::after { border-left: 0; border-right: 3px dashed #c3cdd8; }
.learning-path__link { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: .75rem; color: var(--path-ink); }
.learning-path__step:nth-child(even) .learning-path__link { margin-left: var(--path-turn); }
.learning-path__number { display: grid; place-items: center; flex: 0 0 40px; height: 40px; background: #f0f3f7; border: 2px solid #a1afbf; color: #465b72; font: 700 1.25rem/1 var(--font-main, sans-serif); }
.learning-path__card { min-width: 0; flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .75rem 1rem; border: 1px solid #d2dbe4; border-radius: var(--radius-small, 6px); background: #f8fafc; }
.learning-path__icon { flex: 0 0 auto; font-size: 1.5rem; }
.learning-path__text { flex: 1 1 14rem; min-width: 0; }
.learning-path__title { display: block; color: #34495e; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.learning-path__description { display: block; margin-top: .25rem; font-size: .9rem; line-height: 1.5; color: #506174; overflow-wrap: anywhere; }
.learning-path__state { flex: 0 0 auto; font-size: .85rem; font-weight: 700; color: #506174; }
.learning-path__step--done .learning-path__card { background: #eef8f0; border-color: #a3cbb0; }
.learning-path__step--done .learning-path__number { background: #e0f0e5; border-color: #348052; color: #195d36; }
.learning-path__step--done .learning-path__state { color: #195d36; }
.learning-path__step--next .learning-path__card { background: #eff6ff; border: 2px solid #357abd; }
.learning-path__step--next .learning-path__number { background: #19599f; border-color: #19599f; color: #fff; }
.learning-path__step--next .learning-path__state { color: #19599f; }
.learning-path__exam { text-decoration: none; }
.learning-path__step--exam .learning-path__card { background: #fffaf0; border-color: #cbbb93; }
.learning-path__step--exam .learning-path__number { background: #fff2ce; border-color: #a28b55; font-size: 1.1rem; }
.learning-path__link:hover .learning-path__card { border-color: #19599f; }
.learning-path__link:hover .learning-path__title { text-decoration: underline; text-underline-offset: .2em; }
.learning-path__link:focus-visible { outline: 3px solid #19599f; outline-offset: 4px; border-radius: 2px; }
.learning-path__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* On a lesson, the same truthful sequence becomes a short position strip. */
.learning-path--compact { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid #b7c6d6; border-radius: var(--radius-small, 6px); background: #fff; }
.learning-path__position { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.5; color: #38516b; overflow-wrap: anywhere; }
.learning-path--compact .learning-path__list { display: flex; flex-wrap: wrap; gap: .75rem; }
.learning-path--compact .learning-path__step { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; }
.learning-path--compact .learning-path__step::after { display: none; }
.learning-path--compact .learning-path__step .learning-path__link { width: 44px; min-height: 44px; margin-left: 0; gap: 0; }
.learning-path--compact .learning-path__number { flex-basis: 44px; height: 44px; }
.learning-path--compact .learning-path__card { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.learning-path--compact [aria-current="step"] .learning-path__number { outline: 3px solid #0f172a; outline-offset: 2px; }
[id^="unit-tests-"] { scroll-margin-top: 1rem; }
@media (max-width: 600px) {
  .learning-path-unit > .card-body { padding: .75rem; }
  .learning-path-unit > .card-header { padding: 1rem; }
  .learning-path--compact { padding: .75rem; }
  .learning-path { --path-turn: 16px; }
  .learning-path__link { gap: .5rem; }
  .learning-path__card { padding: .65rem .75rem; gap: .35rem .5rem; }
  .learning-path__text { flex-basis: calc(100% - 2rem); }
  .learning-path__state { margin-left: 2rem; }
  .learning-path__icon { font-size: 1.25rem; }
}
@media (forced-colors: active) {
  .learning-path .learning-path__card, .learning-path .learning-path__number { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .learning-path .learning-path__title, .learning-path .learning-path__description, .learning-path .learning-path__state { color: CanvasText; }
  .learning-path__link:focus-visible, .learning-path--compact [aria-current="step"] .learning-path__number { outline-color: Highlight; }
}