/* Profile banners (cover images) and profile color. The banner sits above the profile card and the card
   floats up over its lower edge. Images keep their aspect with object-fit, so nothing stretches or spills. */

.profile-cover { position: relative; overflow: hidden; height: clamp(150px, 24vw, 248px); margin: var(--s-4) 0 0; border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--rim), var(--e-1); isolation: isolate; }
.profile-cover .pc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--cover-y, 50%); display: block; }
.profile-cover.tint { background: radial-gradient(120% 140% at 12% 0%, color-mix(in oklab, var(--pc) 70%, #fff) 0%, transparent 55%),
  linear-gradient(135deg, var(--pc) 0%, color-mix(in oklab, var(--pc) 40%, #0f1729) 100%); }
.profile-cover.has-img::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgb(0 0 0 / .22)); pointer-events: none; }
.profile-cover.empty { display: grid; place-items: center; height: 110px; margin: 0; color: var(--text-faint); font-size: var(--fs-sm);
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px); box-shadow: inset 0 0 0 1px var(--border); }
.profile-cover .pc-mod { position: absolute; top: 10px; right: 10px; z-index: 1; margin: 0; }
.profile-cover .pc-mod .btn { background: var(--surface-solid); }

/* the card floats over the bottom of the banner */
.profile-head.under-cover { position: relative; margin: calc(-1 * clamp(36px, 6vw, 64px)) var(--s-5) var(--s-4);
  background: color-mix(in oklab, var(--surface-solid) 82%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.profile-head[style*="--pc"] .ph-avatar .av { outline: 3px solid var(--pc); outline-offset: 3px; }

/* Settings > Profile banner */
.cover-up .cover-preview { margin-bottom: var(--s-4); min-width: 0; }
.cover-preview .profile-cover { margin: 0; height: clamp(96px, 18vw, 150px); }
.cover-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: var(--s-4); min-width: 0; }
.form .cover-pick label.file-pick { flex-direction: row; justify-content: center; white-space: nowrap; flex: none; }
.cover-pick .muted { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.cover-up .form-actions { flex-wrap: wrap; }

@media (max-width: 760px) {
  .profile-head.under-cover { margin: -28px var(--s-3) var(--s-4); }
  .profile-head.under-cover .ph-avatar .av { box-shadow: 0 0 0 4px var(--surface-solid); }
  .profile-cover .pc-mod { top: 8px; right: 8px; }
}
@media (max-width: 420px) {
  .profile-head.under-cover { margin-left: var(--s-2, 8px); margin-right: var(--s-2, 8px); }
}