/* login/passkeys.css - Touch ID / passkey controls (Oct 2026). */
.passkey-entry { max-width: 340px; margin: 18px auto 0; text-align: center; }
.passkey-entry button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.passkey-entry p { font-size: 13px; color: #555; margin: 8px 0; }
.passkey-entry [data-passkey-status] { color: #b00020; min-height: 1em; }
.passkey-icon { width: 20px; height: 20px; flex: none; }
.passkey-page { max-width: 480px; }
.passkey-list { margin-top: 12px; text-align: left; }
.passkey-item { border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.passkey-item p { margin: 6px 0; }
.passkey-item button { width: auto; padding: 4px 12px; }
/* On the login pages the control sits below the card, on the dark photo, where #555 text and the
   page's global a { float: right; color: #00f } are unreadable. Give it a matching card of its own
   (same width, colour and shadow as .login-container in css/LoginLayout.css). */
.passkey-entry[data-passkey-mode="login"] { max-width: 300px; padding: 14px 25px; background-color: #f7f7f7; border-radius: 2px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); opacity: 0.98; }
.passkey-entry[data-passkey-mode="login"] p { color: #404040; }
.passkey-entry[data-passkey-mode="login"] a { float: none; color: #3079ed; font-weight: bold; }
.passkey-entry[data-passkey-mode="login"] [data-passkey-status] { color: #b00020; margin-bottom: 0; }
.passkey-entry[data-passkey-mode="login"] [data-passkey-status]:empty { display: none; }
@media only screen and (min-width: 600px) and (max-width: 1024px) { .passkey-entry[data-passkey-mode="login"] { max-width: 450px; } }
@media only screen and (max-width: 400px) { .passkey-entry[data-passkey-mode="login"] { max-width: 230px; } }
@media only screen and (max-width: 280px) { .passkey-entry[data-passkey-mode="login"] { max-width: 240px; padding: 5px 10px; } }
/* "I already have a passkey on this device" (a browser y has not seen use one) and the LastPass note. */
.passkey-entry .passkey-anyway { width: auto; margin: 0 auto; padding: 4px 10px; background: none; border: 0; color: #3079ed; text-decoration: underline; cursor: pointer; font-size: 13px; }
.passkey-note { font-size: 12px; color: #555; }
.passkey-entry[data-passkey-mode="login"] [data-passkey-status].passkey-info { color: #404040; }
/* passkeys.php sits in .login-container, whose fixed height (400px, 500px on tablets) would clip a long list. */
.passkey-page { height: auto; }
.passkey-done { color: #1b5e20; font-weight: bold; }
.passkey-entry .passkey-later { float: none; color: #3079ed; }