/* Profile header (js/components/profile-view.js renderProfileHeader).
 * Banner, then a body where nothing overlaps: the avatar overlaps only the
 * banner's bottom edge; name, @username, status and facts sit beside it;
 * bio, completeness and the stat atoms follow in their own rows. */

.pfh {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--card-bg, var(--bg-secondary));
    border: 1px solid var(--border-color, rgba(148, 163, 184, .25));
    margin-bottom: 1rem;
}

.pfh-banner {
    position: relative;
    height: clamp(130px, 22vw, 220px);
    background-size: cover;
    background-position: center;
    background-color: #7c3aed;
}
.pfh-banner.profile-banner-default { background-image: linear-gradient(120deg, #a855f7, #7c3aed 55%, #ec4899); }

.pfh-media-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 34px;
    padding: 0 .8rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    font: 600 .78rem/1 inherit;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .15s ease, background-color .18s ease, transform .12s ease;
}
.pfh-banner:hover .pfh-media-btn,
.pfh-banner:focus-within .pfh-media-btn { opacity: 1; }
.pfh-media-btn:hover { background: rgba(15, 23, 42, .75); }
.pfh-media-btn:active { transform: scale(.96); }

.pfh-body { padding: 0 1.25rem 1.1rem; }

.pfh-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar identity actions";
    align-items: end;
    gap: .9rem 1.1rem;
}

.pfh-avatar {
    grid-area: avatar;
    position: relative;
    width: 128px;
    height: 128px;
    margin-top: -64px; /* half over the banner, half below: never over the text */
    border-radius: 50%;
    flex: none;
}
.pfh-avatar .profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 4px solid var(--card-bg, var(--bg-secondary));
    background: var(--bg-tertiary, #ddd);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}
.pfh-avatar[role="button"] { cursor: pointer; }
.pfh-avatar-edit {
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .75rem;
    background: var(--color-primary, #a855f7);
    border: 3px solid var(--card-bg, var(--bg-secondary));
    opacity: .9;
    transition: transform .15s ease;
}
.pfh-avatar:hover .pfh-avatar-edit { transform: scale(1.08); }
/* Presence on the avatar: bottom-right, ringed in the card colour. */
.pfh-avatar .pfh-presence {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 3px solid var(--card-bg, var(--bg-secondary));
    box-sizing: content-box;
}

.pfh-identity { grid-area: identity; min-width: 0; padding-top: .75rem; }
.pfh-name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.pfh-name-row .profile-name {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.pfh-icon-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-primary, #a855f7);
    cursor: pointer;
}
.pfh-icon-btn:hover { background: rgba(168, 85, 247, .12); }
.pfh-inline-edit { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; }
.pfh-inline-edit[hidden] { display: none; }
.pfh-inline-edit input { flex: 1 1 12rem; min-width: 0; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border-color, #ccc); background: var(--bg-primary); color: inherit; font: inherit; }

.pfh-sub-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .2rem; color: var(--text-secondary); font-size: .9rem; }

.pfh-facts {
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    color: var(--text-secondary);
    font-size: .82rem;
}
.pfh-fact { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.pfh-fact i { color: var(--color-primary, #a855f7); width: 1em; text-align: center; }
.pfh-fact a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.pfh-fact.is-editable { cursor: pointer; border-radius: 8px; padding: .1rem .35rem; margin: -.1rem -.35rem; transition: background-color .15s ease; }
.pfh-fact.is-editable:hover { background: rgba(168, 85, 247, .1); }
.pfh-fact.is-empty span { font-style: italic; }
.pfh-bday-edit { display: inline-flex; gap: .35rem; align-items: center; margin-left: .4rem; }
.pfh-bday-edit input, .pfh-bday-edit select { height: 30px; border-radius: 8px; border: 1px solid var(--border-color, #ccc); background: var(--bg-primary); color: inherit; font: inherit; font-size: .8rem; padding: 0 .45rem; }
.pfh-bday-edit .btn { height: 30px; padding: 0 .6rem; }

.pfh-actions { grid-area: actions; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; padding-top: .75rem; }

.pfh-bio-wrap { margin-top: .9rem; }
.pfh-bio { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.pfh-bio[data-rich-edit] { cursor: text; border-radius: 10px; padding: .35rem .5rem; margin: 0 -.5rem; transition: background-color .15s ease; }
.pfh-bio[data-rich-edit]:hover { background: rgba(168, 85, 247, .07); }
.pfh-bio.is-empty { color: var(--text-secondary); font-style: italic; }

.pfh-complete { margin-top: .9rem; padding: .75rem .9rem; border-radius: 12px; background: var(--bg-primary); border: 1px solid var(--border-color, rgba(148, 163, 184, .25)); }
.pfh-complete-head { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; }
.pfh-complete-head b { margin-left: auto; }
.pfh-complete-bar { height: 6px; border-radius: 999px; background: var(--bg-tertiary, rgba(148, 163, 184, .25)); overflow: hidden; margin-top: .45rem; }
.pfh-complete-bar span { display: block; height: 100%; border-radius: inherit; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.pfh-complete.is-low .pfh-complete-bar span { background: #ef4444; }
.pfh-complete.is-mid .pfh-complete-bar span { background: #f59e0b; }
.pfh-complete.is-high .pfh-complete-bar span { background: #10b981; }
.pfh-complete-tip { margin-top: .35rem; font-size: .78rem; color: var(--text-secondary); }

/* Stats: one atom each. */
.pfh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: .55rem;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: none;
}
.pf-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .5rem;
    align-items: center;
    padding: .6rem .7rem;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .25));
    background: var(--bg-primary);
    color: inherit;
    font: inherit;
    text-align: left;
    min-width: 0;
}
.pf-stat .stat-icon { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--color-primary, #a855f7); background: rgba(168, 85, 247, .12); font-size: .8rem; }
.pf-stat .stat-value { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pf-stat .stat-label { font-size: .72rem; color: var(--text-secondary); line-height: 1.2; overflow-wrap: anywhere; }
button.pf-stat { cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .12s ease; }
button.pf-stat:hover { border-color: rgba(168, 85, 247, .45); background: rgba(168, 85, 247, .06); }
button.pf-stat:active { transform: scale(.97); }

/* Narrow: avatar above, everything stacked. */
@media (max-width: 640px) {
    .pfh-top { grid-template-columns: 1fr; grid-template-areas: "avatar" "identity" "actions"; align-items: start; }
    .pfh-avatar { width: 104px; height: 104px; margin-top: -52px; }
    .pfh-identity { padding-top: 0; }
    .pfh-actions { justify-content: flex-start; padding-top: 0; }
    .pfh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared inline editor shell (js/components/inline-rich-edit.js). */
.ire-shell { width: 100%; }
.ire-input { width: 100%; box-sizing: border-box; min-height: 4.5rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--color-primary, #a855f7); background: var(--bg-primary); color: inherit; font: inherit; line-height: 1.5; resize: vertical; }
.ire-actions { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.ire-count { margin-right: auto; font-size: .72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Avatar hover hint / upload progress (the handler sets opacity and draws the ring). */
.pfh-avatar-overlay {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .5);
    color: #fff;
    font-size: 1.3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.pfh-avatar-overlay svg { width: 100%; height: 100%; }
.pfh-avatar[role="button"]:hover .pfh-avatar-overlay { opacity: 1; }

/* Theme-token colours (older rules hard-code the dark theme's #cbd5e1). */
.pfh-bio { color: var(--text-primary); }
.pfh-actions .btn-secondary,
.pfh-actions .cr-message-btn,
.pfh-actions .cr-email-btn {
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color, rgba(148, 163, 184, .35));
    opacity: 1;
}
.pfh-actions .btn-secondary:hover,
.pfh-actions .cr-message-btn:hover,
.pfh-actions .cr-email-btn:hover { border-color: rgba(168, 85, 247, .5); color: var(--color-primary, #a855f7); }