/* الدخول بالبصمة — صفحة الدخول (login.html) وتبويب الملف الشخصي (partials/profile_passkeys.html) */
.ui-passkey { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.ui-passkey[hidden] { display: none; }
.ui-passkey__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.ui-passkey__divider::before, .ui-passkey__divider::after { content: ''; flex: 1; border-top: 1px solid var(--color-border); }
.ui-passkey__btn { gap: var(--space-2); }
.ui-passkey__btn .ui-icon { inline-size: 1.4em; block-size: 1.4em; }
.ui-passkey__hint { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-passkey__status { margin: 0; font-size: var(--text-sm); text-align: center; }
.ui-passkey__status.is-danger { color: var(--color-danger); }
.ui-passkey__status.is-success { color: var(--color-success, #15803d); }
.ui-passkey__status[hidden] { display: none; }

.ui-passkey-panel { display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 46rem; }
.ui-passkey-panel__intro { display: flex; gap: var(--space-3); align-items: flex-start; }
.ui-passkey-panel__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.ui-passkey-panel__subtitle { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); }
.ui-passkey-panel__add { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.ui-passkey-panel__add .ui-btn { align-self: flex-start; gap: var(--space-2); }
.ui-passkey-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ui-passkey-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ui-passkey-list__icon { display: inline-flex; padding: var(--space-2); border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-primary); }
.ui-passkey-list__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }

/* صفحة التفعيل بعد أول دخول (passkey_setup.html) */
.ui-passkey-setup { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-passkey-setup__icon { align-self: center; display: inline-flex; padding: var(--space-4); border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-primary); }
.ui-passkey-setup__icon .ui-icon { inline-size: 2.6rem; block-size: 2.6rem; }
.ui-passkey-setup__lead { margin: 0; text-align: center; font-weight: var(--weight-bold); }
.ui-passkey-setup__points { margin: 0; padding-inline-start: var(--space-6); display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
[data-passkey-supported-only][hidden] { display: none; }