/* Auth + account module (loaded via $styles = ['css/auth.css']) */

/* honeypot: invisible to humans and assistive tech, still "there" for naive bots */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.otp-input { letter-spacing: .2em; font-family: SFMono-Regular, Consolas, Menlo, monospace; font-size: 1.15rem; }
.otp-input::placeholder { letter-spacing: normal; }

/* password field: keep the eye button attached and tappable on phones */
.input-group > .btn { min-width: 2.75rem; }

/* 2FA setup */
.qr-box { background: #fff; padding: 10px; border-radius: 12px; line-height: 0; display: inline-block; max-width: 100%; }
.qr-box canvas { width: 200px; height: 200px; max-width: 100%; image-rendering: pixelated; }
.qr-side { min-width: 220px; }
.secret-box { display: block; padding: .6rem .8rem; border: 1px dashed #334155; border-radius: 10px; background: var(--thead); color: #e2e8f0;
    letter-spacing: .1em; font-size: 1rem; overflow-wrap: break-word; user-select: all; }

/* account sub navigation: on phones only the active tab shows its label (keeps all four tabs on one row) */
.account-tabs { overflow-x: auto; scrollbar-width: none; }   /* still swipe-scrollable; overflow-x:auto alone paints a stray vertical scrollbar next to the tabs */
.account-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 575.98px) { .account-tabs .nav-link:not(.active) .tab-label { display: none; } .account-tabs .nav-link { padding: .5rem .7rem; } }

/* active sessions list */
.session-item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; background: transparent; border-color: var(--border); }
.session-main { flex: 1 1 240px; min-width: 0; }

/* recovery codes */
.recovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.recovery-grid code { display: block; text-align: center; padding: .5rem .6rem; border-radius: 9px; border: 1px solid var(--border); background: var(--thead);
    color: #e2e8f0; font-size: .95rem; letter-spacing: .06em; user-select: all; }

@media (max-width: 575.98px) {
    .auth-card { padding: 1.3rem; }
    .qr-box canvas { width: 180px; height: 180px; }
}
@media print {
    body * { visibility: hidden; }
    #recovery-list, #recovery-list * { visibility: visible; }
    #recovery-list { position: absolute; left: 0; top: 0; width: 100%; }
    .recovery-grid code { color: #000; background: #fff; border: 1px solid #000; }
}