/* Hoe sterk is mijn wachtwoord? Zelfde kaart, veld en balkjes als de generator en de lekcheck. */
.st { margin-top: 1.5rem; }
.st .st-out { margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--line); }
.st .st-level { max-width: none; font-size: 1rem; color: var(--muted); }
.st .st-level b { color: var(--ink); font-weight: 600; }
.st .st-level .bars { transform: translateY(-1px); }
.st .st-time { max-width: none; margin-top: .45rem; font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st .st-time b { color: var(--ink); font-weight: 600; }
.st-issues { display: grid; gap: .35rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--ink-2); }
.st-issues:empty { display: none; }
.st-issues li { position: relative; padding-left: 1.05rem; overflow-wrap: anywhere; }
.st-issues li::before { content: ""; position: absolute; left: .15rem; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.st-issues li.is-ok::before { background: var(--good); }
.st .st-note { max-width: none; margin-top: .9rem; }
.st .st-nojs { margin-top: .8rem; }
.st-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.15rem; }
.st-actions .btn { flex: 1 1 12rem; height: 2.75rem; text-decoration: none; }
/* .legal a kleurt links in de tekst; de knoppen houden hun eigen kleur */
.st-actions .btn { color: var(--bg); }
.st-actions .btn-quiet { color: var(--ink); }