/*
 * The public profile, and the lists of people that hang off it.
 *
 * ### `social-profile`, not `profile-card`
 *
 * `pages/profile.css` owns `.profile-card`: the reader's own account as they see it on their settings pages,
 * with an edit button and a photo uploader. This is a different thing that happens to describe the same
 * person — somebody else's account as a visitor sees it, with a follow button and a timeline — and the two
 * have different states to show. Sharing the class would mean every rule needing to know which page it was
 * on.
 *
 * `.profile-meta` *is* shared, deliberately: company, location, website and joined date are the same rows of
 * the same facts on both pages, so they are styled once in `pages/profile.css` and reused here.
 *
 * ### The private and blocked states are not errors
 *
 * A profile the viewer may not see renders its header — name, handle, picture, follow control — and then an
 * empty state instead of a timeline. Nothing is red and nothing says "denied": the account exists, this is
 * simply as much of it as there is to see, and a warning colour would make an ordinary privacy setting look
 * like a fault (§11, §92).
 *
 * The counters are only drawn for a viewer who may see the whole profile, so there is no rule here for a
 * hidden counter: a number that is not shown is not rendered at all, rather than rendered and hidden with CSS
 * where anybody reading the source could read it.
 */

.social-profile {
    max-width: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* The header is one card and one image: the cover carries the avatar, the name and the counter
   chips, and only the handle, the badges and the controls sit on the white bar below. The card
   deliberately does NOT clip: the gear menu's panel opens over the card and the sections below
   it, so clipping lives on the cover alone, which rounds its own upper corners. Profiles without
   a stored cover keep the same shape on the sunken surface, and the --plain modifier swaps the
   white-on-image colours for ink-on-surface ones. */
.social-profile__header {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.social-profile__cover {
    position: relative;
    aspect-ratio: 3 / 1;
    background: var(--colour-surface-sunken);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.social-profile__cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The scrim darkens the lower part of the picture just enough for the white name and chips to
   keep their contrast on any photo. A plain header has no photo, so it has no scrim. */
.social-profile__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 14, 22, 0.65), rgba(10, 14, 22, 0) 60%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}

.social-profile__header--plain .social-profile__cover::after {
    content: none;
}

/* The row that sits on the picture: avatar at the leading edge, name beside it, chips at the
   trailing edge. The avatar's negative margin pulls it half out of the cover, into the white
   bar below — the overlap the other social headers draw. */
.social-profile__cover-bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-2);
    padding: 0 var(--space-2);
}

.social-profile__avatar {
    position: relative;
    z-index: 2;
    margin-bottom: -2.75rem;
    border: 4px solid var(--colour-surface);
    border-radius: var(--radius-full);
    line-height: 0;
}

.social-profile__name {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: #fff;
    text-shadow: 0 1px 10px rgba(10, 14, 22, 0.55);
    overflow-wrap: break-word;
    min-width: 0;
}

.social-profile__header--plain .social-profile__name {
    color: var(--colour-ink);
    text-shadow: none;
}

/* The white bar under the cover. The identity clears the avatar's lower half, which hangs into
   this bar at the leading edge. */
.social-profile__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-1) var(--space-2) var(--space-2);
}

/* 5.5rem is the lg avatar (5rem) plus its 4px ring on each side; the gap repeats the bar's own
   column gap so the handle sits one gap away from the photo, exactly as the name does above. */
.social-profile__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
    margin-inline-start: calc(5.5rem + var(--space-2));
}

@media (max-width: 30rem) {
    .social-profile__identity {
        margin-inline-start: 0;
    }

    .social-profile__bar {
        padding-top: calc(2.75rem + var(--space-2));
    }
}

/* The handle is the first line on the white bar — the name now lives on the picture — so it
   carries a little more weight than a quiet byline. */
.social-profile__handle {
    margin: 0;
    color: var(--colour-ink);
    font-weight: var(--weight-medium);
}

/* The three states a header can announce are badges, so they wrap into the identity column rather than
   fighting the controls for the trailing edge. They are `<p>` elements: each is a statement about the
   relationship, not a label on a field. */
.social-profile__follows-you,
.social-profile__muted,
.social-profile__private {
    margin: 0;
}

/* Trailing edge on a wide screen; a full row of its own once the header wraps, so the follow button never
   ends up squeezed to a two-line label beside a long name. */
.social-profile__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
    padding-top: var(--space-1);
}

/* The counters are quiet chips on the picture: translucent dark pills that stay readable on any
   photo without shouting. On a plain header they become bordered pills on the sunken surface. */
.social-profile__counters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3) auto;
    padding: 0;
    list-style: none;
}

.social-profile__chip {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(10, 14, 22, 0.45);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

a.social-profile__chip:hover,
a.social-profile__chip:focus-visible {
    background: rgba(10, 14, 22, 0.62);
}

.social-profile__header--plain .social-profile__chip {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    color: var(--colour-ink);
    backdrop-filter: none;
}

/* Tabular figures so the three counters keep their positions as the numbers change — a follower
   count that shifts the following count sideways when it ticks over reads as the page having
   moved. */
.social-profile__counter-value {
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

.social-profile__counter-label {
    font-size: var(--text-sm);
    opacity: 0.85;
}

/* The about block is a card of the same family as the header and the post cards: same surface,
   border and radius, so the page reads as one column of cards rather than a card followed by
   loose text on the page background. */
.social-profile__about {
    padding: var(--space-5);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.social-profile__bio {
    margin: 0;
    max-width: var(--measure);
    line-height: var(--leading-body);
    overflow-wrap: break-word;
}

.social-profile__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.social-profile__section-title {
    margin: 0;
    font-size: var(--text-lg);
}

/* Mute and block live behind a `<details>` for the same reason the post menu does: they are rare, they are
   consequential, and neither should be one stray press away from the follow button. */
.profile-menu {
    position: relative;
}

.profile-menu__toggle {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    color: var(--colour-ink-quiet);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    list-style: none;
}

.profile-menu__toggle::-webkit-details-marker {
    display: none;
}

.profile-menu__toggle::marker {
    content: "";
}

.profile-menu__toggle:hover {
    background-color: var(--colour-surface-sunken);
    color: var(--colour-ink);
}

/* The icon-only variant is the header's single quiet control: one round button whose panel carries
   the acts the header used to print as two buttons. */
.profile-menu__toggle--icon {
    padding: var(--space-2);
    border-radius: var(--radius-full);
}

.profile-menu__toggle--icon svg {
    display: block;
}

.profile-menu__panel {
    position: absolute;
    inset-inline-end: 0;
    z-index: var(--layer-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 18rem;
    margin-top: var(--space-1);
    padding: var(--space-4);
    background-color: var(--colour-surface-overlay);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

.profile-menu__form {
    margin: 0;
}

/* A plain row link inside the panel: the same footprint as the forms, without their colour. */
.profile-menu__link {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    color: var(--colour-ink);
    text-decoration: none;
}

.profile-menu__link:hover {
    background: var(--colour-surface-sunken);
}

/* The hint under each control explains what it does to the other person's view — "they will not be told" —
   so it belongs with the control and above the next one, not collected at the bottom of the panel. */
.profile-menu__panel .field__hint {
    margin: 0 0 var(--space-2);
}

/* ---- Followers, following, and follow requests ---------------------------------------------- */

.connections,
.follow-requests {
    max-width: 42rem;
    margin-inline: auto;
}

.connections__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.connections__title,
.follow-requests__title {
    margin: 0;
}

.connections__back {
    font-size: var(--text-sm);
}

.follow-requests__intro {
    color: var(--colour-ink-quiet);
    max-width: var(--measure);
}

/* Approve and reject sit together at the trailing edge of the row, in that order, and neither is the danger
   colour: rejecting a request is a normal answer to it, not a destructive act. */
.follow-request__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

.follow-request__form {
    margin: 0;
}

.follow-request__time {
    flex-basis: 100%;
}