/* Sign-in page only: the passkey (fingerprint) controls. Loaded by the
   SignIn template, not the shared layout, so it cannot reach other screens.
   Every value comes from a token in organic.css or a size canopy.css uses. */

/* "or" between the password form and the passkey button */
.cnpy-si-alt { display: flex; flex-direction: column; gap: var(--space-2); }
.cnpy-si-or {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: var(--space-1) 0 0;
}
.cnpy-si-or::before, .cnpy-si-or::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); }

/* passkey buttons: icon, spinner and label on one line */
.cnpy-si-passkey-btn { position: relative; gap: var(--space-2); }
.cnpy-si-passkey-btn.btn-secondary {
  background: var(--color-neutral-100); border-color: var(--color-accent-2-300); color: var(--color-accent-2-800);
}
.cnpy-si-passkey-btn.btn-secondary:hover { background: var(--color-accent-2-100); border-color: var(--color-accent-2-500); }
.cnpy-si-passkey-btn.btn-secondary:active { background: var(--color-accent-2-200); }
.cnpy-si-icon { flex: none; display: block; }
.cnpy-si-label { min-width: 0; }

/* busy: the spinner takes the icon's 18px box, so the button keeps its size */
.cnpy-si-spinner {
  display: none; flex: none; width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor;
  animation: cnpy-si-spin .8s linear infinite;
}
.cnpy-si-busy .cnpy-si-icon { display: none; }
.cnpy-si-busy .cnpy-si-spinner { display: block; }
.cnpy-si-busy:disabled { opacity: 1; cursor: progress; }
.cnpy-si-passkey-btn.btn-secondary.cnpy-si-busy { background: var(--color-accent-2-100); }
@keyframes cnpy-si-spin { to { transform: rotate(360deg); } }

/* second step: one method at a time, with a switch when there are two */
.cnpy-si-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.cnpy-si-hint { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); text-wrap: pretty; }
.cnpy-si-switch { align-self: flex-start; font-size: 13px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cnpy-si-spinner { animation: none; border-color: currentColor; border-right-color: transparent; }
}