/* Temporary stylesheet inbox.
   Move rules into the appropriate base, component, or layout file when processed. */

.user-hovercard {
  position: relative;
  display: inline-block;

  /* Direct child only, so the nested follow-toggle frame doesn't get card chrome. */
  > turbo-frame {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: max-content;
    max-width: 18rem;
    padding: 0.6rem 0.7rem;
    background: var(--color--bg-raised);
    border-radius: 0.5rem;
    box-shadow: var(--card-shadow-and-border);
  }

  &:hover > turbo-frame {
    display: block;
  }
}