@php
    $h = 'font-display text-base font-semibold text-ink';
    $p = 'text-sm leading-relaxed text-ink-2';
    $li = 'text-sm leading-relaxed text-ink-2';
    $code = 'rounded bg-inset px-1.5 py-0.5 font-mono text-[12px] text-accent-text';
@endphp

<div class="space-y-3">
    <h3 class="{{ $h }}">Two-factor authentication</h3>
    <p class="{{ $p }}">2FA is optional but recommended. Under <span class="text-ink">Settings → Security</span> you can set up:</p>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}"><span class="text-ink">TOTP</span> (authenticator app, e.g. "Google Authenticator") — a time-based 6-digit code.</li>
        <li class="{{ $li }}"><span class="text-ink">Security key</span> (hardware, e.g. YubiKey) — plug in and tap once.</li>
        <li class="{{ $li }}"><span class="text-ink">Backup codes</span> (Backup-Code) — one-time codes for emergency access.</li>
    </ul>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">Important: access paths &amp; which factor works where</h3>
    <p class="{{ $p }}">A <span class="text-ink">security key (YubiKey) only works over the HTTPS domain</span> — WebAuthn needs a secure context and the domain as its identifier (rpId). Over the domain, security-key sign-in is offered and works.</p>
    <p class="{{ $p }}">Over the <span class="text-ink">bare-IP / HTTP recovery path</span> (<code class="{{ $code }}">http://&lt;server-ip&gt;</code>) you <span class="text-ink">cannot</span> sign in with a security key. There you must use a <span class="text-ink">backup code (Backup-Code)</span>.</p>
    <p class="{{ $p }}"><span class="text-ink">TOTP works everywhere</span> — including bare-IP/HTTP. If you use TOTP you do <span class="text-ink">not</span> need a backup code for the bare-IP path.</p>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}">If you use <span class="text-ink">only</span> a security key: keep your <span class="text-ink">backup codes</span> — they are your only way in over the bare-IP recovery path.</li>
        <li class="{{ $li }}">If you (also) use TOTP: you are covered on every path without needing backup codes.</li>
    </ul>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">Password-manager extensions (Bitwarden, Kaspersky …)</h3>
    <p class="{{ $p }}">Browser extensions can intercept security-key registration and offer to "save a passkey" instead. Clusev correctly requests a hardware key (cross-platform, non-resident, with the <code class="{{ $code }}">security-key</code> hint), but a website cannot disable extensions.</p>
    <p class="{{ $p }}">Fix: turn off the extension's passkey handling for this site (e.g. Bitwarden → "Ask to save and use passkeys" off), or register the key in a browser/window <span class="text-ink">without</span> that extension (e.g. a private window). Signing in with the key works afterwards even with the extension active.</p>
</div>