/* 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); }
.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); }
/* The CTA box (site/funnel.py): the skill's outcome as the headline, one button, the trial line. Tinted with the accent
   (the page's one action), near the top of a skill page and at the end of a book or thinker page. */
.skill-cta { margin-top: var(--space-12); background: var(--color-accent-soft); border: 1px solid var(--color-accent-line); border-radius: var(--radius-lg); padding: var(--space-6); }
.skill-page .skill-cta { margin: var(--space-6) 0 var(--space-8); }
.skill-cta > :first-child { margin-top: 0; }
.skill-cta .eyebrow { margin-bottom: 0; }
.skill-cta h2 { margin-top: var(--space-1); margin-bottom: 0; }
.skill-cta .cta-lead { margin: var(--space-3) 0 0; }
.cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.cta-act .btn { white-space: normal; text-align: center; text-wrap: balance; line-height: var(--leading-snug); }
.cta-sure { margin: 0; font-size: var(--text-ui); line-height: var(--leading-ui); color: var(--color-muted); }
.skill-cta .cta-note { margin: var(--space-4) 0 0; color: var(--color-muted); }
.skill-cta .tk-more { margin: var(--space-2) 0 0; }
@media (max-width: 479px) { .cta-act .btn { width: 100%; } .cta-sure { width: 100%; text-align: center; } }
/* The example: what the reader gives the AI, and the start of what comes back, ending in a fade into the CTA. */
.skill-example { margin-top: var(--space-4); }
.ex-label { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-ui); line-height: var(--leading-ui); font-weight: var(--weight-semibold); color: var(--color-muted); }
.ex-in { margin: 0; padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--color-line); background: var(--color-wash); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ex-in p { margin: 0; font-size: var(--text-md); }
.ex-out { position: relative; max-height: 520px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-4) var(--space-5) 0; background: var(--color-surface); font-size: var(--text-md); }
.ex-out::after { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--color-surface)); }
.ex-out .ex-h { margin: var(--space-3) 0 var(--space-2); font-weight: var(--weight-semibold); color: var(--color-ink); }
.ex-out .ex-h1 { font-size: var(--text-xl); margin-top: 0; }
.ex-out p, .ex-out ul { margin: 0 0 var(--space-3); }
.ex-out .table-wrap { margin: 0 0 var(--space-3); }
.ex-out table { font-size: var(--text-ui); }
.ex-more { border: 1px solid var(--color-line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-5); background: var(--color-surface); }
.ex-more p { margin: 0 0 var(--space-4); color: var(--color-muted); }
@media (max-width: 479px) { .ex-more .btn { width: 100%; } .ex-out { padding-inline: var(--space-4); } }
/* The same single action fixed at the bottom on phones (site/funnel.py sticky_bar), hidden while a CTA box is in view. */
.cta-sticky { display: none; }
@media (max-width: 640px) {
  .cta-sticky { display: block; position: fixed; inset: auto 0 0 0; z-index: 20; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--color-bg); border-top: 1px solid var(--color-line); transition: transform .2s ease; }
  .cta-sticky .btn { width: 100%; }
  .cta-sticky.is-hidden { transform: translateY(110%); }
  body:has(.cta-sticky) { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) { .cta-sticky { transition: none; } }
.skill-cta-top { margin: var(--space-8) 0; }