/*
 * The free credits pages (/credits and /credits/<id>). Loads after the Last Table tokens and reading styles: the finder
 * form, the ranked list, the facts list, the prerequisites checklist and the claim steps with their screenshots.
 * Tokens only.
 */

.credits-finder { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--lt-space-3) var(--lt-space-4); margin: 0 0 var(--lt-space-5); padding: var(--lt-space-4); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-1); }
.credits-finder[hidden] { display: none; }
.credits-finder .lt-label { display: block; margin-bottom: var(--lt-space-1); }
.credits-finder select.lt-input { width: 100%; appearance: auto; }
.credits-finder fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.credits-finder legend { padding: 0; }
.credits-choice { display: flex; align-items: center; gap: var(--lt-space-2); margin-top: var(--lt-space-1); }
.credits-choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--lt-glow-ink); }

.credits-count { color: var(--lt-text-2); font-family: var(--lt-font-mono); font-size: var(--lt-step--1); }

.credits-ranked { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.credits-ranked > li { counter-increment: rank; padding: var(--lt-space-4) 0; border-top: 1px solid var(--lt-line); }
.credits-ranked > li[hidden] { display: none; }
.credits-ranked > li > a { font-weight: 600; }
.credits-ranked > li > a::before { content: counter(rank) ". "; font-family: var(--lt-font-mono); color: var(--lt-text-2); }
.credits-ranked p { margin: var(--lt-space-1) 0 0; color: var(--lt-text-2); overflow-wrap: anywhere; }

.credits-facts { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--lt-space-2) var(--lt-space-4); margin: 0; padding: var(--lt-space-4); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-1); }
.credits-facts dt { color: var(--lt-text-2); font-family: var(--lt-font-mono); font-size: var(--lt-step--1); }
.credits-facts dd { margin: 0; overflow-wrap: anywhere; }

.credits-check { margin: 0; padding: 0; list-style: none; }
.credits-check li { padding: var(--lt-space-2) 0; border-top: 1px solid var(--lt-line); }
.credits-check strong { font-weight: 600; }

.credits-steps li + li { margin-top: var(--lt-space-4); }
.credits-steps figure { margin: var(--lt-space-3) 0 0; }
.credits-steps img { display: block; max-width: 100%; height: auto; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); }

@media (max-width: 480px) {
  .credits-facts { grid-template-columns: 1fr; gap: var(--lt-space-1); }
  .credits-facts dd + dt { margin-top: var(--lt-space-2); }
}