/*
 * A person, and lists of people.
 *
 * One row: picture, name, handle, and sometimes a line of bio. It is used by search results, follower and
 * following lists, follow requests, and the muted list — every place where the answer to "who?" has to be
 * shown in a line.
 *
 * ### The whole identity is one link
 *
 * Picture, name and handle sit inside a single `<a>`, so there is one target instead of three adjacent ones
 * that all go to the same place. A row that is not a link at all — an account that has gone, or a blocked
 * account whose profile would answer 404 — renders `.person--plain` and gets no hover, no underline and no
 * pointer, because there is nothing to press.
 *
 * ### Why `min-width: 0` appears twice
 *
 * A flex item defaults to its content's minimum width, so a long display name or a 60-character handle
 * refuses to shrink and pushes the trailing button off the row. The nested elements have to opt out of that
 * default explicitly before `text-overflow` can do anything.
 *
 * ### `.person__action` and `.person__note` are not inside `.person`
 *
 * A list row owns those two: the unfollow or unmute button, and the "muted 3 hours ago" note. They belong to
 * the *relationship*, not to the person, and the component knows nothing about either — it is rendered on
 * pages that have no button at all. So they are styled without depending on `.person` being their parent.
 */

.person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.person__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.person__link:hover .person__name,
.person__link:focus-visible .person__name {
    color: var(--colour-primary);
    text-decoration: underline;
}

.person__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.person__name {
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person__handle {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The bio is a sibling of the link, so it takes a full row of its own rather than competing with the name
   for the same line. One line of it: this is a list, and a list is for choosing, not for reading. */
.person__bio {
    flex-basis: 100%;
    margin: 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person--plain .person__name {
    color: var(--colour-ink-quiet);
    font-style: italic;
    font-weight: var(--weight-normal);
}

/* Pushed to the trailing edge, so every button in a list lines up whatever the names before it are like. */
.person__action {
    margin-inline-start: auto;
}

.person__note {
    flex-basis: 100%;
    color: var(--colour-ink-faint);
    font-size: var(--text-xs);
}

.person-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.person-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-top: var(--border-width) solid var(--colour-border);
}

/* Separators between rows, not around the list: the container it sits in already has its own edges. */
.person-list__item:first-child {
    border-top: 0;
}

.person-list__item > .person {
    flex: 1 1 12rem;
}