/* =============================================================================
   public-profiles.css - Public Profiles addon styles

   Linked after theme.css. The public name panel's lines (the check while
   typing, the change-period notice, the link to the profile), the head of
   a public profile (the initial beside the name, the owner's line) and the
   look of a name that links to its profile. Built from the style.css and
   theme.css tokens, so it follows the theme and dark mode.
   ============================================================================= */

/* The public name line under the field while the user types: in the ink,
   bold, once the name is free, the error color when it is not; the
   change-period notice in the muted ink */
.public-name-status {
    margin: -8px 0 16px 0;
    font-size: .85rem;
}

.public-name-status:empty {
    display: none;
}

.public-name-ok {
    color: var(--black);
    font-weight: 600;
}

.public-name-refused {
    color: var(--error-text);
}

.public-name-notice {
    margin: -8px 0 16px 0;
    color: var(--gray);
    font-size: .85rem;
}

.public-name-profile {
    margin: -8px 0 16px 0;
    font-size: .85rem;
}

/* -- Public profiles: /user/{name} --------------------------------------- */

/* The head of the page: the initial in a circle beside the name */
.public-profile-hero {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.public-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin-inline-end: 16px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    font-size: 1.75rem;
    font-weight: 700;
}

.public-profile-who {
    flex: 1 1 auto;
    min-width: 0;
}

/* Beside the avatar the name needs no page-title hairline or the space
   under it: the owner's line sits right below the name */
.public-profile-who .page-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.public-profile-who h1 {
    margin: 0;
    overflow-wrap: anywhere;
}

/* The owner's own line under the name: who sees the page, then a compact
   Edit account button, beside it when there is room and under it on a
   narrow screen */
.public-profile-self {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 4px 0 -8px 0;    /* takes back the children's bottom margin, so the name block centres on the avatar */
}

.public-profile-self p {
    margin: 0 12px 8px 0;
    color: var(--gray);
    font-size: .9rem;
}

.public-profile-self .public-profile-edit {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px 0;
    padding: 4px 12px;
    font-size: .85rem;
    font-weight: 600;
}

.public-profile-self .public-profile-edit svg {
    margin-inline-end: 8px;
}

.public-profile-section {
    margin-top: 24px;
}

/* A name that leads to its public profile reads as the name, underlined
   only under the pointer or the keyboard */
a.profile-link {
    color: inherit;
    text-decoration: none;
}

a.profile-link:hover,
a.profile-link:focus-visible {
    text-decoration: underline;
}