/* Person links: avatar, display name and @handle all route to the profile. These wrap
   existing components, so they inherit rather than impose colour and type. */
.person-link,
.person-name,
.person-handle {
  color: inherit;
  text-decoration: none;
}

/* The avatar wrapper must not add a box of its own around the disc. */
.person-link {
  display: inline-flex;
  flex: none;
  border-radius: 50%;
}

.person-name:hover,
.person-handle:hover,
.person-name:focus-visible,
.person-handle:focus-visible {
  text-decoration: underline;
}

.person-link:focus-visible,
.person-name:focus-visible,
.person-handle:focus-visible {
  outline: 2px solid var(--brand, #6ea8fe);
  outline-offset: 2px;
}

.person-link:focus-visible {
  border-radius: 50%;
}

/* A whole post card is a tap target. The links inside it stay above that overlay, and
   the overlay itself sits behind everything interactive. */
.item { position: relative; }

.post-open {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* Everything EXCEPT the overlay is lifted above it. The :not() matters — without it this
   rule would also raise .post-open and put the overlay back on top of its own siblings,
   swallowing every link, button and text selection in the card. */
.item > *:not(.post-open),
.item .x-avatar,
.item .x-content { position: relative; z-index: 1; }

.item:focus-within .post-open:focus-visible {
  outline: 2px solid var(--brand, #6ea8fe);
  outline-offset: -2px;
}