/* Credits page (/credits/). Reuses the About page's hero/body/section classes (about/about.css); these are the extras. */
.cr-body { max-width: 860px; }
.cr-toc { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2) var(--tlg-space-5); margin-bottom: var(--tlg-space-10); padding-bottom: var(--tlg-space-5); border-bottom: var(--tlg-border-width) solid var(--tlg-border); font-weight: var(--tlg-weight-bold); }
.cr-group { margin: var(--tlg-space-8) 0 var(--tlg-space-3) !important; color: var(--tlg-text-muted); font-size: var(--tlg-text-lg); }
.ab-section > h2 + .cr-group { margin-top: 0 !important; }
.cr-list { display: grid; gap: var(--tlg-space-4); }
.cr-list > li { padding: var(--tlg-space-4) var(--tlg-space-5); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); overflow-wrap: anywhere; }
.cr-list h3 { margin-bottom: var(--tlg-space-2) !important; font-size: var(--tlg-text-lg); }
.cr-list p + p, .cr-sub + p { margin-top: var(--tlg-space-2) !important; }
.cr-sub { display: grid; gap: var(--tlg-space-1); padding-left: var(--tlg-space-5) !important; list-style: disc !important; }
.cr-meta { color: var(--tlg-text-muted); }
.ab-section > p + .cr-meta { margin-top: var(--tlg-space-3) !important; }
.cr-lic { display: inline-block; margin-right: var(--tlg-space-2); padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface-2); font-weight: var(--tlg-weight-bold); }
.cr-body code { padding: 0 3px; border-radius: 4px; background: var(--tlg-surface-2); font-size: 0.95em; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .cr-list > li { padding: var(--tlg-space-4); }
}