/* Profile header (accountapp/detail.html): one card with a tinted cover, the avatar as an
   element tile overlapping it, then name and badges, title, bio, badge shelf, numbers and
   the subscribe button. The cover takes the member's personal colour when set, else amber. */
.pf-wrap { max-width: 40rem; margin: 0 auto; text-align: center; }
.pf {
    --pf-tint: var(--pt-accent);
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
    margin: 1.5rem 0 2rem; padding: 0 1.25rem 1.5rem;
    background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-lg);
    overflow: hidden;
}
.pf-cover {
    align-self: stretch; height: 7.5rem; margin: 0 -1.25rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pt-text) 7%, transparent) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
        linear-gradient(0deg, color-mix(in srgb, var(--pt-text) 7%, transparent) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
        linear-gradient(135deg, color-mix(in srgb, var(--pf-tint) 70%, var(--pt-surface)), color-mix(in srgb, var(--pf-tint) 18%, var(--pt-surface)));
}
/* A cover picture replaces the tint and the grid. */
.pf-cover.has-image { background: var(--pt-surface-2) center / cover no-repeat; }
.pf-tools { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; }
.pf-tools .pt-icon-btn {
    background: color-mix(in srgb, var(--pt-surface) 82%, transparent); color: var(--pt-text);
    backdrop-filter: blur(4px); border-radius: var(--pt-radius-pill);
}
.pf-tools .pt-icon-btn:hover { background: var(--pt-surface); }
/* The owner's "Edit cover" button: same glass pill as the icon buttons, with a label. */
.pf-tool-label {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: 0 .9rem;
    background: color-mix(in srgb, var(--pt-surface) 82%, transparent); color: var(--pt-text) !important;
    backdrop-filter: blur(4px); border-radius: var(--pt-radius-pill);
    font-size: .875rem; font-weight: 600; text-decoration: none !important; white-space: nowrap;
}
.pf-tool-label:hover { background: var(--pt-surface); }
.pf-tool-label:focus-visible, .pf-avatar-edit:focus-visible { outline: 2px solid var(--pt-focus-ring); outline-offset: 2px; }
.pf-tool-label .material-icons { font-size: 1.15rem; }
.pf-avatar-box { position: relative; margin-top: calc(-3.75rem - 1.25rem); }
.pf-avatar-edit {
    position: absolute; right: -.35rem; bottom: -.35rem; display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--pt-surface); color: var(--pt-text) !important; border: 1px solid var(--pt-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15); text-decoration: none !important;
}
.pf-avatar-edit:hover { background: var(--pt-surface-2); }
.pf-avatar-edit .material-icons { font-size: 1.15rem; }
.pf-avatar {
    display: block; width: 7.5rem; height: 7.5rem; object-fit: cover;
    border-radius: var(--pt-tile-radius); border: 4px solid var(--pt-surface);
    background: var(--pt-surface-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.pf-avatar-box + .pf-id { margin-top: -.5rem; }
/* Name, title, message, bio and badge shelf: one column with one gap between every line. */
.pf-id { --pf-gap: .75rem; word-break: keep-all; overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: center; gap: var(--pf-gap); max-width: 32rem; }
.pf-id > * { margin: 0 !important; }
.pf-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; max-width: 100%; }
.pf-name h1 { margin: 0; font: 700 1.875rem/1.2 var(--pt-font-text); letter-spacing: -.01em; color: var(--pt-text); overflow-wrap: anywhere; }
.pf .ps-badges-name { margin-left: 0; }
.pf-msg { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--pt-text); }
.pf-bio { color: var(--pt-text-muted); font-size: .9375rem; line-height: 1.65; }
.pf-bio p { margin: 0 0 .5rem; }
.pf-bio p:last-child { margin: 0; }
.pf-stats { gap: 0; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--pt-border); align-self: stretch; }
.pf-stats > div { flex: 1; }
.pf-stats > div + div { border-left: 1px solid var(--pt-border); }
.pf-stats dd { font-variant-numeric: tabular-nums; }
.pf-actions { margin: 0; }
.pf-actions .pt-btn { min-width: 10rem; }
@media (max-width: 575px) {
    .pf-wrap { padding: 0 .75rem; }
    .pf { margin: .75rem 0 1.5rem; padding: 0 1rem 1.25rem; }
    .pf-cover { height: 6rem; margin: 0 -1rem; }
    .pf-avatar-box { margin-top: calc(-3rem - 1.25rem); }
    .pf-avatar { width: 6rem; height: 6rem; }
    .pf-tool-label { min-height: 2.25rem; padding: 0 .75rem; }
    .pf-name h1 { font-size: 1.5rem; }
    .pf-actions, .pf-actions .pt-btn { width: 100%; }
}

/* Profile look (profileapp/appearance.html): a live preview of the card's top, then cover
   picture, cover colour and profile picture. */
.ps-look [hidden] { display: none !important; }
.ps-look-preview { margin: 0 0 1.5rem; padding-bottom: 1.25rem; gap: .75rem; }
.ps-look-name { margin: 0; font: 700 1.25rem/1.3 var(--pt-font-text); color: var(--pt-text); overflow-wrap: anywhere; }
.ps-look-section { padding: 1.25rem 0; border-top: 1px solid var(--pt-border); }
.ps-look-title { margin: 0 0 .25rem; font: var(--pt-text-h2); font-size: 1.0625rem; color: var(--pt-text); }
.ps-look-help { margin: 0 0 .75rem; font-size: .875rem; color: var(--pt-text-muted); word-break: keep-all; }
.ps-look-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ps-look-actions label { margin: 0; cursor: pointer; }
.ps-look-actions label:focus-within { outline: 2px solid var(--pt-focus-ring); outline-offset: 2px; }
.ps-look-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.ps-look-swatch { position: relative; margin: 0; cursor: pointer; }
.ps-look-swatch > span[aria-hidden] {
    display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
    border-radius: var(--pt-tile-radius); background: var(--sw); border: 1px solid var(--pt-border);
    color: var(--pt-ink); transition: box-shadow .15s;
}
.ps-look-swatch.is-custom > span[aria-hidden] { background: conic-gradient(from 0deg, #F06292, #FFC107, #81C784, #4FC3F7, #BA68C8, #F06292); }
.ps-look-swatch.is-custom input:checked + span[aria-hidden] { background: var(--sw); }
.ps-look-swatch .material-icons { font-size: 1.1rem; padding: .2rem; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.ps-look-swatch input:checked + span[aria-hidden] { box-shadow: 0 0 0 2px var(--pt-surface), 0 0 0 4px var(--pt-selected-bg); }
.ps-look-swatch input:focus-visible + span[aria-hidden] { outline: 2px solid var(--pt-focus-ring); outline-offset: 4px; }
/* The native colour input covers the custom swatch, so a tap opens the system picker. */
.ps-look-picker { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ps-look-hide { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; }
.pf-private { min-height: 1.75rem; padding: 0 .65rem; font-size: .8rem; text-decoration: none !important; }
.pf-private .material-icons { font-size: 1rem; }

/* Profile look, step 6: cover position and picking from Studio creations. */
.ps-look-preview .pf-cover.has-image { cursor: grab; touch-action: none; }
.ps-look-preview .pf-cover.has-image:active { cursor: grabbing; }
.ps-look-position { margin-top: 1rem; }
.ps-look-position label { display: block; margin: 0 0 .25rem; font-size: .875rem; font-weight: 600; color: var(--pt-text); }
.ps-look-range { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; font-size: .8125rem; color: var(--pt-text-muted); }
.ps-look-range input { flex: 1; accent-color: var(--pt-accent); }
.ps-pick {
    width: min(40rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 2rem)); padding: 1.25rem;
    color: var(--pt-text); background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-lg);
}
.ps-pick::backdrop { background: rgba(0, 0, 0, .5); }
.ps-pick-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.ps-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.ps-pick-item {
    aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
    background: var(--pt-surface-2); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md);
}
.ps-pick-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-pick-item:hover, .ps-pick-item:focus-visible { outline: 2px solid var(--pt-focus-ring); outline-offset: 2px; }
.ps-pick-empty { padding: 2rem 1rem; text-align: center; color: var(--pt-text-muted); }
.ps-pick-empty .material-icons { font-size: 2rem; }
.ps-pick-empty p { margin: .5rem 0 1rem; }