/* ============================================================================
   PROFILE LINKS — the one rule behind every "@handle" and avatar that points at
   /profile/{username}.
   ----------------------------------------------------------------------------
   These links were retrofitted onto markup that already had its own typography:
   .comment-username, .member-name, .reviewer-name, .builder-name, .artist-name,
   … all carry their own font-size / weight / colour. So this rule deliberately
   does NOT style text — it only neutralises the UA anchor defaults (blue,
   underlined) so an element that used to be a <div> or <span> looks exactly the
   same after becoming an <a>, and adds the hover affordance.

   display:inline-block matters. Several of the hosts were block elements sitting
   in a flex column (.comment-username has white-space:nowrap + text-overflow:
   ellipsis, which needs a block box to clip against); a bare inline anchor would
   collapse those. inline-block keeps the box while leaving the anchor shrink-to-
   fit where it wraps an avatar.

   LOADED SITE-WIDE from templates/fragments/head-styles.html — these links show
   up on nearly every page (comments, cards, sidebars, notifications, popups), so
   a per-component copy would mean a dozen near-identical rules and a <link> on
   every htmx-swappable fragment. See static/css/new/README.md.
   ========================================================================== */

.profile-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    transition: color 0.2s, opacity 0.2s;
}

/* Text handles get the accent + underline; an avatar wrapper has no text to
   underline, so it dims slightly instead (see the :has() rule below). */
.profile-link:hover,
.profile-link:focus-visible {
    color: var(--accent-tertiary, #e935c1);
    text-decoration: underline;
}

/* Avatar wrappers: the anchor's only child is the image. */
.profile-link:has(> img) {
    line-height: 0;          /* no descender gap under the avatar */
    border-radius: 50%;
}

.profile-link:has(> img):hover,
.profile-link:has(> img):focus-visible {
    text-decoration: none;
    opacity: 0.85;
}

.profile-link:focus-visible {
    outline: 2px solid var(--accent-tertiary, #e935c1);
    outline-offset: 2px;
    border-radius: 4px;
}