/* Subject colour belongs to the lesson, not its position in the list. */
body.learning-course:not([data-path-art]) .learning-trail {
  --lesson-wash: #f5ded7;
  --lesson-accent: #a64235;
  --lesson-texture: url("assets/ui/button-texture-coral-v2.webp");
  gap: 20px;
  align-items: stretch;
}
body.learning-course .learning-trail.learning-numbers {
  --lesson-wash: #dceade;
  --lesson-accent: #326652;
  --lesson-texture: url("assets/ui/button-texture-mint-v2.webp");
}
body.learning-course .learning-trail.learning-radicals {
  --lesson-wash: #dfe5ef;
  --lesson-accent: #3f587c;
  --lesson-texture: url("assets/ui/button-texture-indigo-v2.webp");
}
body.learning-course .learning-trail.learning-joyo {
  --lesson-wash: #f2e7c7;
  --lesson-accent: #7c5c20;
  --lesson-texture: url("assets/ui/button-texture-gold-v2.webp");
}
body.learning-course .learning-trail.learning-vocabulary {
  --lesson-wash: #ebe1f0;
  --lesson-accent: #6d4d84;
  --lesson-texture: url("assets/ui/button-texture-lavender-v2.webp");
}
body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson {
  position: relative;
  height: 100%;
  align-items: stretch;
  padding: 21px;
  color: #112d50;
  background: #fffaf2 url("assets/pedia/washi-paper-v1.png") center / 600px;
  border: 7px solid transparent;
  border-image: url("assets/ui/nav-frame-navy-v3.svg") 72 82 / 7px / 0 stretch;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 7px solid transparent;
  border-image: url("assets/ui/nav-frame-navy-v3.svg") 72 82 / 7px / 0 stretch;
  pointer-events: none;
}
body.learning-course:not([data-path-art]) .learning-lesson-heading {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  gap: 15px;
  width: calc(100% + 56px);
  align-self: stretch;
  margin: -28px -28px 10px;
  padding: 16px 28px 22px;
  overflow: hidden;
  background: transparent;
  text-align: left;
}
body.learning-course:not([data-path-art]) .learning-lesson-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--lesson-texture) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, #0009 67%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 38%, #0009 67%, transparent 100%);
  pointer-events: none;
}
body.learning-course:not([data-path-art]) .learning-lesson-copy {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}
body.learning-course:not([data-path-art]) .learning-trail .learning-lesson .learning-lesson-icon {
  display: grid;
  place-items: center;
  margin: 0;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  color: var(--lesson-accent);
  background: #fffaf2b8;
  border: 1px solid #112d5025;
  border-radius: 47% 53% 49% 51%;
  box-shadow: none;
  font: 700 1.5rem/1 Georgia, serif;
}
body.learning-course:not([data-path-art]) .learning-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-self: auto;
  justify-content: flex-start;
  gap: 8px;
  min-height: 23px;
  color: #33495d;
}
body.learning-course:not([data-path-art]) .learning-lesson-state {
  background: var(--lesson-accent);
  color: #fff;
  border-radius: 3px;
}
body.learning-course:not([data-path-art]) .learning-lesson-copy > strong {
  width: 100%;
  font: 700 1.45rem/1.15 Georgia, serif;
  text-align: left;
}
body.learning-course:not([data-path-art]) .learning-lesson-preview {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.learning-course:not([data-path-art]) .learning-lesson-note { color: #455b69; line-height: 1.5; }
body.learning-course:not([data-path-art]) .learning-lesson-parts {
  gap: 10px;
  margin-top: auto;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}
body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson .learning-lesson-part {
  position: relative;
  grid-template-columns: 27px minmax(0, 1fr) 22px;
  gap: 4px 12px;
  min-height: 78px;
  padding: 12px;
  background: #fffdf680;
  border: 1px solid #8091a0;
  border-image: none;
  border-radius: 4px 7px 3px 6px;
  box-shadow: none;
  opacity: 1;
  transform: none;
  clip-path: none;
}
body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson .learning-lesson-part.is-recommended {
  background: var(--lesson-wash);
  border-color: var(--lesson-accent);
}
body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson .learning-lesson-part.is-locked {
  background: #ecebe680;
  border-color: #aab0ad;
  cursor: default;
}
body.learning-course:not([data-path-art]) .learning-lesson-part strong {
  grid-column: 2;
  color: #112d50;
  font: 700 1.12rem/1.2 Georgia, serif;
}
body.learning-course:not([data-path-art]) .learning-lesson-part small {
  grid-column: 2;
  color: #455b69;
  font: 400 .76rem/1.4 var(--ui);
}
body.learning-course:not([data-path-art]) .learning-lesson-part.is-locked strong { color: #52616b; }
body.learning-course:not([data-path-art]) .learning-lesson-part.is-complete strong::after { color: var(--lesson-accent); }
body.learning-course:not([data-path-art]) .learning-lesson-part-arrow {
  grid-column: 3;
  color: var(--lesson-accent);
}
body.learning-course:not([data-path-art]) .learning-lesson-part::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  display: block;
  width: 25px;
  height: 25px;
  background: #112d50;
  mask: var(--stage-icon) center / contain no-repeat;
}
.learning-lesson-part.is-flashcards { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='m8 3 12 2-3 17-12-2zM5 6 2 7l3 14'/%3E%3C/svg%3E"); }
.learning-lesson-part.is-path { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 5Q7 1 2 4v16q5-3 10 1 5-4 10-1V4q-5-3-10 1v16'/%3E%3C/svg%3E"); }
.learning-lesson-part.is-exam { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M6 3h12v18H6zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.learning-lesson-part.is-locked { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 10h14v12H5zM8 10V6a4 4 0 0 1 8 0v4M12 14v4'/%3E%3C/svg%3E"); }
body.learning-course:not([data-path-art]) .learning-lesson-part.is-locked::before { background: #52616b; }
body.learning-course:not([data-path-art]) .learning-lesson-part:focus-visible {
  outline: 3px solid #112d50;
  outline-offset: 3px;
}
@media (hover: hover) {
  body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson .learning-lesson-part:not(.is-locked):hover {
    background: var(--lesson-wash);
    border-color: var(--lesson-accent);
    box-shadow: 0 2px 0 #112d5014;
  }
}
@media (max-width: 900px) {
  body.learning-course:not([data-path-art]) .learning-trail { grid-template-columns: 1fr; }
}
@media (min-width: 1300px) {
  body.learning-course:not([data-path-art]) .learning-lesson-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, .9fr);
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    align-items: center;
  }
  body.learning-course:not([data-path-art]) .learning-lesson-meta { grid-column: 1; grid-row: 1; }
  body.learning-course:not([data-path-art]) .learning-lesson-copy > strong { grid-column: 1; grid-row: 2; }
  body.learning-course:not([data-path-art]) .learning-lesson-preview {
    grid-column: 2;
    grid-row: 1 / 4;
    white-space: normal;
    font-size: 1.35rem;
    line-height: 1.45;
  }
  body.learning-course:not([data-path-art]) .learning-lesson-note { grid-column: 1; grid-row: 3; }
}
@media (max-width: 480px) {
  body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson { padding: 15px; }
  body.learning-course:not([data-path-art]) .learning-lesson-heading { width: calc(100% + 44px); margin: -22px -22px 8px; padding: 15px 22px 20px; gap: 11px; }
  body.learning-course:not([data-path-art]) .learning-trail > li .learning-lesson .learning-lesson-part { padding: 11px 9px; gap: 4px 9px; }
  body.learning-course:not([data-path-art]) .learning-lesson-part strong { font-size: 1rem; }
  body.learning-course:not([data-path-art]) .learning-lesson-part small { font-size: .71rem; }
}