/* Avatar - User avatar and author list styling */

.author-list {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    font-style: normal;
}

/* The one avatar design, used everywhere a user is pictured (header, bylines, profiles,
   history, messages). Markup: .avatar holding either an <img> or a span.avatar-initials.
   Contexts change only --avatar-size; the ring and initials scale with it. */
.avatar {
    --avatar-size: calc(var(--step--1) * 3.55);

    display: inline-block;
    vertical-align: middle;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: calc(var(--avatar-size) * 0.065) solid #ffffff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    text-decoration: none;
    background-color: #777;
    transition: transform 0.15s ease;
}

/* Only avatars that link somewhere lift on hover */
a.avatar:hover {
    transform: translateY(-2px);
}

/* Recent authors overlap into a stack */
.author-list .avatar {
    filter: grayscale(100%);

    & + .avatar {
        margin-left: calc(var(--avatar-size) * -0.32);
    }
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar .avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: #555;
    font-family: var(--font-family-san-serif);
    font-weight: 600;
    font-size: calc(var(--avatar-size) * 0.4);
    line-height: 1;
    text-transform: uppercase;
}

.editor-info {
    container: byline / inline-size;
    margin-block-start: calc(var(--step-6) * 0.14);
    margin-block-end: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(0.85rem, 2.2vw, 1.35rem);
    row-gap: 0.5em;
    padding: 0;
    font-family: var(--font-family-san-serif);
    font-size: var(--step--1);
}

.editor-authors {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.85rem, 2.2vw, 1.35rem);
    flex-shrink: 0;
}

.editor-byline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.18em;
    line-height: 1.2;
}

.editor-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Beside the authors, the label lines up with the start of the time. */
.editor-updated {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 0.18em;
    line-height: 1.2;
}

/* With no authors the block sits alone, so the label centres above the time. */
.editor-info:not(:has(.editor-authors)) .editor-updated {
    align-items: center;
    text-align: center;
}

/* Narrow bylines stack the authors and "Last updated" on separate centred lines, with the label
   centred above the time. CSS cannot tell when a flex item has wrapped by itself, so this query
   decides the stacking and the centring together. 38em (in the byline's own font size) fits a
   24-character username, three avatars and the longest "time ago" text on one line, so wider
   bylines don't wrap on their own; that is roughly viewports under 640px. */
@container byline (inline-size < 38em) {
    .editor-authors,
    .editor-status {
        flex-basis: 100%;
        justify-content: center;
    }

    .editor-updated {
        align-items: center;
        text-align: center;
    }
}

.editor-info .meta-label {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8c96a6;
    white-space: nowrap;
}

.editor-info .meta-value {
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-foreground);
    white-space: nowrap;
}

.editor-info .author-primary {
    color: var(--color-foreground);
    font-weight: 500;
    text-decoration: none;

    &:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }
}

.editor-info .author-others {
    color: #8c96a6;
    font-weight: 400;
}