/* Who's signed in, in every rhys.wtf app's header: their picture and
   @handle, just left of the apps menu, linking to their profile
   (rhyswtf-apps, `signed_in()`). Signed out, there's nothing. Shared by
   all the apps, so it reads only the tokens every app's stylesheet
   defines (--color-*, --font-*), with fallbacks; light and dark follow
   from those. Edit it in rhyswtf-web and sync, never in an app. */

/* `a.` so it outranks each app's own a, a:visited and a:hover. */
a.signed-in,
a.signed-in:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    min-width: 0;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    border-radius: 999px;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-muted, var(--color-text));
    text-decoration: none;
    white-space: nowrap;
}

a.signed-in:hover {
    color: var(--color-text);
    background: var(--color-surface);
    text-decoration: none;
}

a.signed-in:focus-visible {
    outline: 2px solid var(--color-link-hover, currentColor);
    outline-offset: 1px;
}

/* The picture, with the inbox's unread dot on its top right: Profiles'
   /inbox/dot.svg (empty when there's nothing unread), or on Profiles'
   own pages the dot drawn in place (or nothing). */
.signed-in__face {
    position: relative;
    display: block;
    flex: none;
}

.signed-in__dot {
    position: absolute;
    top: -0.1rem;
    right: -0.15rem;
    display: block;
    width: 0.62rem;
    height: 0.62rem;
    pointer-events: none;
}

.signed-in__dot > img,
.signed-in__dot > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The size of the apps mark's squares together, round. Profiles always
   sends a picture: theirs, or their initial on a colour of their own. */
.signed-in__picture {
    display: block;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface);
}

.signed-in__handle {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On a phone, the picture alone, so the header never wraps under it or
   scrolls sideways. The link's label still says who. */
@media (max-width: 30rem) {
    a.signed-in,
    a.signed-in:visited {
        padding: 0.3rem;
    }

    .signed-in__handle {
        display: none;
    }
}

/* The apps menu's last row, signed in only: Sign out (rhyswtf-axum's
   `brand::sign_out`), a form posting to the app's /logout. Its button is
   drawn like the menu's other rows, which each app's own stylesheet
   styles (`.apps-menu__item`); this only takes away a button's own look. */
.apps-menu__form {
    margin: 0;
}

button.apps-menu__action {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}