/* ==========================================================================
   Passkeys — the sign-in page's passkey button (login.php) and the Passkeys card on
   Profile & security (js/passkeys.js). Tokens only.
   ========================================================================== */

/* ---- sign-in page ---- */
.pk-signin{margin-top:var(--space-5)}
.pk-or{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4);font-size:var(--text-meta);color:var(--ink-3)}
.pk-or::before,.pk-or::after{content:"";flex:1;height:1px;background:var(--line)}
.pk-signin .btn.lg{gap:var(--space-2)}
.pk-signin .btn.lg i{font-size:18px}
.pk-msg{margin-top:var(--space-3)}
.auth-card .pk-msg{margin-bottom:0}

/* ---- Profile & security: the Passkeys card ---- */
.pk-list{list-style:none}
.pk-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) 0}
.pk-row + .pk-row{border-top:1px solid var(--line)}
.pk-list .pk-row:first-child{padding-top:0}
.pk-ico{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:16px}
.pk-copy{min-width:0}
.pk-name{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2)}
.pk-name b{font-size:var(--text-ui);font-weight:600;color:var(--ink-1);overflow-wrap:anywhere}
.pk-meta{margin-top:2px;font-size:var(--text-meta);line-height:var(--leading-ui);color:var(--ink-3)}
.pk-meta .sep{margin:0 var(--space-1)}
.pk-meta time,.pk-meta .mono{white-space:nowrap}
.pk-acts{display:flex;align-items:center;gap:var(--space-1)}

.pk-empty{display:flex;align-items:flex-start;gap:var(--space-3)}
.pk-empty-ico{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:20px}
.pk-empty b{display:block;font-size:var(--text-ui);font-weight:600;line-height:var(--leading-ui);color:var(--ink-1)}
.pk-empty p{margin-top:var(--space-1);max-width:520px;font-size:var(--text-ui);line-height:var(--leading-body);color:var(--ink-2)}
.pk-card .notice + .pk-list,.pk-card .notice + .pk-empty{margin-top:var(--space-4)}
.pk-err{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}

/* add-a-passkey dialog */
.pk-form > p{margin-bottom:var(--space-4);font-size:var(--text-ui);line-height:var(--leading-body);color:var(--ink-2)}
.pk-form .fld:last-of-type{margin-bottom:var(--space-1)}
.pk-form .pk-code{margin:var(--space-4) 0 var(--space-1)}
.pk-form .pk-code .code-in{margin-top:0}
.pk-form .form-err{margin-top:var(--space-3)}
/* one quiet line under the list, not a boxed notice */
.pk-note{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-meta);line-height:var(--leading-ui);color:var(--ink-3)}
.pk-note i{flex-shrink:0;margin-top:1px;font-size:14px}
.pk-remove-out{margin-top:var(--space-4)}

@media (max-width:600px){
  .pk-row{grid-template-columns:32px minmax(0,1fr)}
  .pk-acts{grid-column:2;justify-self:start}
}