/* A collector wherever a page names one (`renderCollector` in avatar.js, the
   `collector` macro): their picture in its round frame, wearing their effect,
   then their name. Pages used to draw a frame each, at a size each, and most
   forgot the effect. A page that needs another size sets --collector-size on
   the component rather than drawing a frame of its own. */
.collector {
    --collector-size: 28px;
    --collector-border: 2px;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}
.collector-xs { --collector-size: 1.4em; --collector-border: 1.5px; gap: .3em; }
.collector-md { --collector-size: 40px; gap: .6em; }
.collector-lg { --collector-size: 72px; --collector-border: 3px; gap: .8em; }

.collector-avatar {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    /* One square cell, so a photo that is not square is cropped to the
       circle rather than stretching it. */
    grid-template: 100% / 100%;
    place-items: center;
    box-sizing: border-box;
    width: var(--collector-size);
    height: var(--collector-size);
    overflow: hidden;
    border: var(--collector-border) solid var(--ink-border);
    border-radius: 50%;
    background: var(--pastel-purple-light);
    color: var(--text-dark);
    font-size: calc(var(--collector-size) * .42);
    font-weight: 1000;
    line-height: 1;
    text-decoration: none;
}
.collector-avatar > img,
.collector-avatar > .avatar-effect-host,
.collector-avatar .avatar-initial { width: 100%; height: 100%; }
.collector-avatar img { display: block; object-fit: cover; }
.collector-avatar .avatar-initial { display: grid; place-items: center; }

/* From the size of a row up the aura reaches past the frame, as it does in the
   navbar; the picture stays round because the effect host clips it. The
   smallest, inline in a sentence, keeps it inside. */
.collector-sm .collector-avatar:has(> .avatar-effect-host),
.collector-md .collector-avatar:has(> .avatar-effect-host),
.collector-lg .collector-avatar:has(> .avatar-effect-host) { overflow: visible; }

/* Online: a green dot on the bottom right of their picture, which is the
   component's first box and stands centred in it; beside the name without one. */
.collector.has-online { position: relative; }
.collector-online {
    --online-size: max(8px, calc(var(--collector-size) * .3));
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: var(--online-size);
    height: var(--online-size);
    margin-left: .35em;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2fbf63;
    vertical-align: middle;
}
.collector.has-online > .collector-online {
    position: absolute;
    /* Over the effect the picture wears, which stands at 2 (profile-effects.css). */
    z-index: 3;
    top: calc(50% + var(--collector-size) / 2 - var(--online-size));
    left: calc(var(--collector-size) - var(--online-size));
    margin: 0;
}
.collector-line > .collector-online { --online-size: 8px; }

.collector-text { display: inline-grid; min-width: 0; line-height: 1.2; }
.collector-heading { min-width: 0; overflow-wrap: anywhere; }
.collector-line, .collector-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collector-name { font-weight: 800; }
a.collector-name { color: inherit; }
.collector-detail { font-size: .78em; font-weight: 800; opacity: .72; }