/* Skill library pages (/skills and /skills/<slug>) and the skill block that ends a book guide. Uses the tokens in site.css. */
.crumbs { margin: var(--space-6) 0 0; color: var(--color-muted); }
.crumbs a { color: var(--color-muted); }
.skill-page h1 { margin-top: var(--space-2); }
.skill-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-2); }
.skill-ctas .btn { white-space: normal; text-align: center; }
@media (max-width: 479px) { .skill-ctas .btn { width: 100%; } }
.skill-steps > li + li { margin-top: var(--space-2); }
.skill-md { margin: var(--space-4) 0 0; max-height: 560px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: var(--text-ui); line-height: var(--leading-ui);
  background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-4); }
.skill-md code { background: none; padding: 0; font-size: inherit; }
.changelog { list-style: none; padding: 0; }
.skills-index .lead { max-width: var(--read); }
.skill-search { margin: var(--space-8) 0 var(--space-2); max-width: 520px; }
.skill-search label { display: block; font-weight: var(--weight-semibold); color: var(--color-ink); margin-bottom: var(--space-2); }
.skill-search input { width: 100%; min-height: 48px; padding: 0 var(--space-4); font: inherit; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); }
.skill-search .small { margin: var(--space-2) 0 0; }
.skill-jump { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.skill-jump li + li { margin-top: 0; }
.skill-jump a { display: inline-flex; align-items: center; line-height: var(--leading-ui); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-surface); text-decoration: none; font-size: var(--text-ui); }
.skill-jump a:hover { border-color: var(--color-accent); }
.skill-group { margin-top: var(--space-12); scroll-margin-top: var(--space-4); }
.skill-group h2 { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-1); }
.skill-group .count { font-size: var(--text-ui); font-weight: var(--weight-medium); color: var(--color-muted); }
.skill-group .cards { margin-top: var(--space-4); }
.skill-group li[hidden], .skill-group[hidden], .skill-none[hidden] { display: none; }
.skill-none { margin-top: var(--space-8); }
.skill-cta { margin-top: var(--space-12); background: var(--color-wash); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); }
.skill-cta > :first-child { margin-top: 0; }
.skill-cta h2 { margin-top: var(--space-1); }
.skill-cta .skill-ctas { margin-bottom: 0; }
.skill-cta .small { margin-bottom: 0; }