/* ---- colorful topic cards ------------------------------------------------ */
.topic-card { --topic-fg: #0f172a; }
.topic-card.topic-colored {
  background: var(--topic-bg) !important;
  color: var(--topic-fg) !important;
  border-color: color-mix(in srgb, var(--topic-fg) 18%, transparent) !important;
}
.topic-card.topic-colored .topic-title,
.topic-card.topic-colored .topic-blurb,
.topic-card.topic-colored .topic-detail-title,
.topic-card.topic-colored h3,
.topic-card.topic-colored p,
.topic-card.topic-colored .topic-list,
.topic-card.topic-colored .topic-list li,
.topic-card.topic-colored .topic-meta,
.topic-card.topic-colored .topic-meta strong,
.topic-card.topic-colored .topic-tag,
.topic-card.topic-colored .topic-toggle,
.topic-card.topic-colored .topic-summary::before {
  color: var(--topic-fg) !important;
}
.topic-card.topic-colored .topic-tag,
.topic-card.topic-colored .topic-toggle,
.topic-card.topic-colored .topic-detail {
  border-color: color-mix(in srgb, var(--topic-fg) 25%, transparent) !important;
}
.topic-card.topic-colored[open] {
  border-color: color-mix(in srgb, var(--topic-fg) 45%, transparent) !important;
}

@media (max-width: 820px) {
  .learn-layout {
    grid-template-columns: 1fr;
  }
  .learn-path {
    position: static;
  }
  .learn-path-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 70%);
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scroll-snap-type: x mandatory;
  }
  .learn-node {
    scroll-snap-align: start;
  }
  .learn-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .learn-stats {
    justify-content: center;
  }
  .learn-mode-bar {
    justify-content: center;
  }
  .learn-prog-sub-bar {
    justify-content: center;
  }
  .learn-map-unlock {
    justify-content: center;
    text-align: center;
  }
  .type-final-checks {
    grid-template-columns: 1fr;
  }
  .type-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .type-station-line {
    width: clamp(0.45rem, 3vw, 1.4rem);
  }
  .type-machine,
  .meaning-lab {
    grid-template-columns: 1fr;
  }
  .type-byte-stack {
    justify-content: flex-start;
  }
  .finger-counter {
    grid-template-columns: repeat(4, minmax(42px, 1fr));
    row-gap: 0.85rem;
  }
  .hex-strip {
    grid-template-columns: repeat(8, minmax(27px, 1fr));
  }
  .arithmetic-rules,
  .optimization-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .arithmetic-history li {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .type-card-grid {
    grid-template-columns: 1fr;
  }
  .type-station-dot {
    width: 1.75rem;
    height: 1.75rem;
  }
  .type-station-line {
    width: 0.25rem;
  }
  .type-coach {
    grid-template-columns: 58px 1fr;
  }
  .type-coach img {
    width: 58px;
    height: 58px;
  }
  .carry-steps {
    grid-template-columns: 1fr;
  }
  .cycle-race {
    gap: 0.35rem;
    padding: 0.7rem;
  }
  .paper-sheet {
    padding-left: 3.2rem;
  }
}