/* The sequence identifies the colour, so filtering or switching languages keeps it stable. */
#content [data-learning-color] {
  --chapter-accent: var(--learning-accent);
  --chapter-soft: var(--learning-soft);
  --chapter-sub: var(--learning-sub);
  --grammar-topic-accent: var(--learning-accent);
}

#content .gente-course-unit[data-learning-color] {
  border-color: var(--learning-sub);
}
#content .gente-course-unit[data-learning-color] > summary {
  border-left: 6px solid var(--learning-edge);
  background: linear-gradient(90deg, var(--learning-soft), #fff 85%);
}
#content .gente-course-unit[data-learning-color] .gente-course-unit-number {
  background: var(--learning-badge) !important;
  color: var(--learning-accent) !important;
}
#content .gente-course-unit[data-learning-color] .gente-course-unit-copy small,
#content .gente-course-unit[data-learning-color] .gente-course-unit-meta strong {
  color: var(--learning-accent) !important;
}
#content .gente-course-unit[data-learning-color] > .gente-course-unit-parts {
  padding-left: 24px;
  border-top: 1px solid var(--learning-sub);
  background: var(--learning-soft);
}
#content .gente-course-unit[data-learning-color] .gente-course-part {
  border: 1px solid var(--learning-sub) !important;
  border-left-width: 4px !important;
  background: rgba(255, 255, 255, .9) !important;
}
#content .gente-course-unit[data-learning-color] .gente-course-part .book-chapter-copy small,
#content .gente-course-unit[data-learning-color] .gente-course-part .book-chapter-action {
  color: var(--learning-accent) !important;
}
#content .gente-course-unit[data-learning-color] .gente-course-part:hover,
#content .gente-course-unit[data-learning-color] .gente-course-part:focus-visible {
  border-color: var(--learning-accent) !important;
}

#content .grammar-topic-toc .toc-row[data-learning-color] {
  border-color: var(--learning-sub) !important;
  background: linear-gradient(90deg, var(--learning-soft), #fff 85%) !important;
}
#content .grammar-topic-toc .toc-row[data-learning-color]::before {
  width: 5px;
  background: var(--learning-edge);
}
#content .grammar-topic-toc .toc-row[data-learning-color] .toc-no {
  color: var(--learning-accent) !important;
}
#content .grammar-chapter-view[data-learning-color] .grammar-theme-hero,
#content .study-layout[data-learning-color] .study-hero-chapter {
  border-left: 6px solid var(--learning-edge) !important;
  background: linear-gradient(110deg, var(--learning-soft), #fff 85%) !important;
}
#content .grammar-chapter-view[data-learning-color] .grammar-theme-hero .eyebrow,
#content .study-layout[data-learning-color] .study-hero-chapter .eyebrow {
  color: var(--learning-accent) !important;
}
#content .grammar-chapter-view[data-learning-color] .grammar-theme-hero > strong {
  border-color: var(--learning-sub);
  color: var(--learning-accent);
}
#content .grammar-topic-pager > button[data-learning-color] {
  border-color: var(--learning-sub);
  border-left: 4px solid var(--learning-edge);
  background: var(--learning-soft);
  color: var(--learning-accent);
}
#content .grammar-chapter-view[data-learning-color] .grammar-on-page button {
  border-color: var(--learning-sub);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--learning-soft) 40%, white);
}
#content .grammar-chapter-view[data-learning-color] .grammar-reading-section {
  border-left: 4px solid var(--learning-sub) !important;
}
@media (max-width: 720px) {
  #content .gente-course-unit[data-learning-color] > .gente-course-unit-parts {
    padding: 10px;
  }
}