/* Optional passkey controls adopt existing Brandguide IO type and buttons. */
.passkey-login-button{display:block;width:100%;min-height:44px;margin:12px 0 0;padding:11px 16px;border:1px solid #171717;border-radius:100px;background:#fff;color:#171717;font:500 14px/1.4 'Helvena',Arial,sans-serif;cursor:pointer}
.passkey-login-button:hover{background:#f3f3ef}
.passkey-login-button:disabled,#passkey-settings button:disabled{opacity:.55;cursor:wait}
/* Match the existing workspace Security cards, typography and button hierarchy. */
body.account-page #passkey-settings{margin:0;min-width:0;padding:24px;border:1px solid #dedbd3;border-radius:20px;background:#fff;box-shadow:none}
body.account-page #passkey-settings .passkey-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
body.account-page #passkey-settings .passkey-heading h2{font-size:20px;line-height:1.3;margin:0;font-weight:500;color:#171717}
body.account-page #passkey-settings .passkey-optional{display:inline-flex;align-items:center;padding:4px 9px;background:#f4f3ef;border:1px solid #dedbd3;border-radius:100px;font-size:11px;line-height:1.3;font-weight:500;color:#3c3d39}
body.account-page #passkey-settings>p:first-of-type{margin:0 0 20px;font-size:12px;line-height:1.6;color:#53534f}
body.account-page #passkey-settings .passkey-list{margin:0 0 18px}
body.account-page #passkey-settings .passkey-empty{padding:14px 16px;background:#f8f7f3;border:1px solid #e5e2da;border-radius:12px;font-size:12px;line-height:1.5;color:#66675f}
body.account-page #passkey-settings .passkey-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #dedbd3;font-size:12px;line-height:1.5}
body.account-page #passkey-settings .passkey-row span{min-width:0;overflow-wrap:anywhere}
body.account-page #passkey-settings .passkey-remove{flex:none;font:inherit;font-size:12px;border:1px solid #242620;border-radius:100px;background:#fff;color:#242620;padding:9px 14px}
body.account-page #passkey-settings .passkey-remove:hover{background:#efede5}
body.account-page #passkey-settings #add-passkey{margin-top:0;min-height:38px;font-size:12px}
body.account-page #passkey-settings #passkey-status{margin:12px 0 0;font-size:12px;line-height:1.5;color:#3c3d39}
body.account-page #passkey-settings #passkey-status:empty{display:none}
@media(max-width:640px){body.account-page #passkey-settings{padding:20px}body.account-page #passkey-settings .passkey-heading h2{font-size:18px}}

/* Make the WebAuthn safety link clearly recognizable in passkey login feedback. */
#auth-status .passkey-safety-link{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
#auth-status .passkey-safety-link:hover{text-decoration-thickness:2px}