/* Inloggen (e-mailcode, tweede factor, inrichten) en Mijn account › Beveiliging. Alleen variabelen uit site.css. */

.a-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--muted); font-size: 13px; }
.a-or::before, .a-or::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }

.a-code {
    width: 100%; box-sizing: border-box; height: 52px; font-size: 26px; letter-spacing: 8px; text-align: center;
    font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--ink); background: var(--surface);
}
.a-code:focus { outline: 2px solid var(--diesel); border-color: var(--diesel); }

.a-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.a-links form { margin: 0; }
.a-linkbtn { background: none; border: 0; padding: 0; color: var(--diesel); font: inherit; cursor: pointer; text-decoration: underline; }

.a-choice { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.a-choice form { margin: 0; }
.a-choice button {
    width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.a-choice button:hover { border-color: var(--diesel); }
.a-choice .muted { font-size: 13px; }

.a-step { border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: 14px; margin-bottom: 12px; }
.a-step h2 { font-size: 16px; margin: 0 0 6px; }
.a-step p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }

.qr { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.qr img { width: 168px; height: 168px; image-rendering: pixelated; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--surface); }
.qr .secret { font-size: 13px; overflow-wrap: anywhere; color: var(--ink-2); max-width: 260px; }
.qr .secret strong { display: inline-block; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; color: var(--ink); }

.recovery-codes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding: 12px 14px; margin: 10px 0;
    background: var(--canvas); border: 1px dashed var(--line); border-radius: var(--radius-m);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px;
}

.method-list { list-style: none; margin: 0; padding: 0; }
.method-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.method-list li:last-child { border-bottom: 0; }
.method-list .grow { flex: 1; min-width: 0; }

@media (max-width: 480px) {
    .recovery-codes { grid-template-columns: 1fr; }
    .qr img { width: 148px; height: 148px; }
}