/* ============================================================
   A /@username profile (pages/user-profile/user-profile-shared.mjs):
   the profile card on the cream page, then the person's posts in the
   feed's own dark column (cards from feed.css), and the story viewer
   (web-static/js/profile.js).
   ============================================================ */

.pf {
  --pf-card: rgba(255, 253, 247, .78);
  --pf-edge: #fffdf7;
  --pf-ring: conic-gradient(from 210deg, #06b6d4, #3b82f6, #5865f2, #3b82f6, #06b6d4);
  --pf-gold: linear-gradient(100deg, #9a6a06 0%, #c08b12 40%, #a87508 70%, #8a5d04 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 104px 16px 72px;
  box-sizing: border-box;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }

/* ---- The card ---- */
.pf-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--pf-card);
  box-shadow: 0 18px 50px rgba(31, 35, 33, .09), 0 0 0 1px rgba(50, 55, 30, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* The cover is the profile picture itself, blurred into a wash of its own
   colours, over the brand green for someone without a picture. */
.pf-cover {
  position: relative;
  z-index: 0;
  height: 156px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(143, 199, 165, .9), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(31, 79, 52, .95), transparent 65%),
    var(--green-500, #2f6e48);
}
.pf-cover span {
  position: absolute;
  inset: -48px;
  background-position: center;
  background-size: cover;
  filter: blur(34px) saturate(1.7) brightness(1.06);
  transform: scale(1.2);
}
.pf-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 27, 0) 35%, rgba(20, 23, 27, .18) 100%);
}
.pf-premium .pf-cover::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #f6d27a, #c99316, #f6d27a);
}

.pf-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: -68px;
  padding: 0 24px;
}

/* ---- The picture, with the story ring ---- */
.pf-avatar {
  position: relative;
  isolation: isolate;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 34px;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pf-avatar:focus-visible { outline: 3px solid var(--w-focus, rgba(51, 117, 77, .45)); outline-offset: 6px; }
.pf-avatar-in {
  position: relative;
  display: block;
  width: 136px;
  height: 136px;
  overflow: hidden;
  border: 5px solid var(--pf-edge);
  border-radius: 34px;
  background: #e7e2d2;
  box-shadow: 0 10px 28px rgba(31, 35, 33, .16);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pf-avatar-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font: 700 52px/1 var(--font-display, 'Bricolage Grotesque', sans-serif);
}
.pf-avatar-fb[hidden] { display: none; }
.pf-premium .pf-avatar:not(.pf-has-story) .pf-avatar-in { border-color: #e2b23a; }

/* The ring says there is a story; it is the way in. */
.pf-avatar-still { cursor: default; }
.pf-has-story { cursor: pointer; }
.pf-has-story::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: 39px;
  background: var(--pf-ring);
  box-shadow: 0 0 18px rgba(59, 130, 246, .35);
  animation: pfGlow 2.4s ease-in-out infinite;
}
.pf-has-story:hover .pf-avatar-in { transform: scale(.965); }
.pf-has-story.pf-story-seen::before {
  background: rgba(50, 55, 30, .22);
  box-shadow: none;
  animation: none;
}
@keyframes pfGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, .25); }
  50% { box-shadow: 0 0 22px rgba(88, 101, 242, .5); }
}

/* ---- Actions ---- */
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 6px;
}
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 600 14.5px/1 var(--font-sans, 'Hanken Grotesk', sans-serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.pf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--w-focus, rgba(51, 117, 77, .45)); }
.pf-btn-main { background: var(--brand, #2f6e48); color: var(--brand-contrast, #f7f3e8); }
.pf-btn-main:hover { background: var(--brand-hover, #265f3e); box-shadow: var(--shadow-glow); color: var(--brand-contrast, #f7f3e8); }
.pf-btn-ghost {
  background: rgba(255, 255, 255, .72);
  color: var(--w-ink, #20301f);
  box-shadow: 0 0 0 1px rgba(50, 55, 30, .14) inset;
}
.pf-btn-ghost:hover { background: #fff; }
.pf-btn .fp-ic { flex: none; }

/* ---- Name, bio, when they joined ---- */
.pf-body { padding: 14px 24px 24px; }
.pf-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--w-ink, #20301f);
  font: 700 32px/1.1 var(--font-display, 'Bricolage Grotesque', sans-serif);
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.pf-premium .pf-name span {
  background: var(--pf-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pf-tick { flex: none; width: 22px; height: 22px; }
.pf-handle {
  margin: 4px 0 0;
  color: var(--w-mut, #525f4c);
  font-size: 16px;
  overflow-wrap: anywhere;
}
.pf-bio a { color: var(--green-600, #265f3e); text-decoration: underline; text-underline-offset: 2px; }
.pf-bio {
  margin: 14px 0 0;
  color: var(--w-ink2, #33402f);
  font-size: 16.5px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pf-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--w-mut, #525f4c);
  font-size: 14.5px;
}
.pf-meta svg { flex: none; }

/* ---- A community invite in the bio: the app's invite card ---- */
.pf-invites {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
  margin: 14px 0 0;
}
.pf-invite {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 10px 10px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
  box-shadow: 0 0 0 1px rgba(50, 55, 30, .1) inset, 0 6px 18px rgba(31, 35, 33, .06);
  color: var(--w-ink, #20301f);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pf-invite:hover { box-shadow: 0 0 0 1px rgba(47, 110, 72, .28) inset, 0 10px 24px rgba(31, 35, 33, .1); color: var(--w-ink, #20301f); }
.pf-invite:focus-visible { outline: 3px solid var(--w-focus, rgba(51, 117, 77, .45)); outline-offset: 2px; }
.pf-invite-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--green-50, #eef3ec);
  color: var(--green-500, #2f6e48);
}
.pf-invite-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-invite-icon > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font: 700 20px/1 var(--font-display, 'Bricolage Grotesque', sans-serif);
}
.pf-invite-icon svg { width: 26px; height: 26px; }
.pf-invite-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.pf-invite-text b { overflow: hidden; font-size: 15.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pf-invite-text span { overflow: hidden; color: var(--w-mut, #525f4c); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.pf-invite-join {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--brand, #2f6e48);
  color: var(--brand-contrast, #f7f3e8);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.pf-invite:hover .pf-invite-join { background: var(--brand-hover, #265f3e); }
.pf-invite-plain .pf-invite-join {
  background: transparent;
  color: var(--green-600, #265f3e);
  box-shadow: 0 0 0 1px rgba(47, 110, 72, .35) inset;
}
.pf-invite-plain:hover .pf-invite-join { background: var(--green-50, #eef3ec); }

/* ---- Badges: the app's showcase tiles, with what they mean ---- */
.pf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.pf-badge {
  position: relative;
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  max-width: 200px;
  align-items: center;
  gap: 2px;
  padding: 14px 10px 13px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
  box-shadow: 0 0 0 1px rgba(50, 55, 30, .08) inset, 0 6px 16px rgba(31, 35, 33, .05);
  text-align: center;
}
.pf-badge::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 72px;
  height: 52px;
  border-radius: 50%;
  background: var(--pf-glow, rgba(47, 110, 72, .14));
  filter: blur(14px);
  transform: translateX(-50%);
}
.pf-badge img { position: relative; width: 48px; height: 48px; margin-bottom: 6px; object-fit: contain; }
/* A minted coin is drawn inside a margin of its own: shown larger, so it
   stands as tall as the badges beside it. */
.pf-badge-coin img { transform: scale(1.4); }
.pf-badge b { position: relative; color: var(--w-ink, #20301f); font-size: 14px; line-height: 1.25; }
.pf-badge span { position: relative; color: var(--w-mut, #525f4c); font-size: 12.5px; line-height: 1.35; }
.pf-badge-verified { --pf-glow: rgba(59, 130, 246, .2); }
.pf-badge-premium { --pf-glow: rgba(214, 160, 30, .28); }
.pf-badge-staff, .pf-badge-moderator { --pf-glow: rgba(47, 160, 90, .2); }
.pf-metal-gold { --pf-glow: rgba(214, 160, 30, .3); }
.pf-metal-silver { --pf-glow: rgba(120, 140, 160, .26); }
.pf-metal-bronze { --pf-glow: rgba(190, 110, 60, .26); }
.pf-metal-emerald { --pf-glow: rgba(40, 170, 110, .26); }
.pf-metal-amethyst { --pf-glow: rgba(150, 90, 210, .26); }
.pf-metal-platinum { --pf-glow: rgba(150, 170, 190, .3); }
.pf-metal-sapphire { --pf-glow: rgba(50, 110, 220, .26); }
.pf-metal-ruby { --pf-glow: rgba(210, 50, 80, .24); }
.pf-metal-blaze, .pf-metal-ember, .pf-metal-sunset { --pf-glow: rgba(240, 120, 40, .26); }
.pf-metal-obsidian { --pf-glow: rgba(40, 40, 60, .22); }

/* Many badges: the app's compact showcase, the coin over its name, with what
   it means in a tooltip (profile.js) or the title without scripts. */
.pf-badges.is-many {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.pf-badges.is-many .pf-badge {
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 12px 6px 11px;
  text-align: center;
  cursor: default;
}
.pf-badges.is-many .pf-badge:focus-visible { outline: 2px solid var(--w-focus, rgba(51, 117, 77, .45)); outline-offset: 2px; }
.pf-badges.is-many .pf-badge::before { top: 4px; left: 50%; width: 60px; height: 44px; transform: translateX(-50%); }
.pf-badges.is-many .pf-badge img { width: 46px; height: 46px; margin: 0 0 5px; }
.pf-badges.is-many .pf-badge b { align-self: center; font-size: 12.5px; }
.pf-badges.is-many .pf-badge span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pf-tip {
  position: absolute;
  z-index: 5;
  max-width: min(260px, 100%);
  padding: 8px 12px;
  border-radius: 10px;
  background: #23272c;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.pf-tip[hidden] { display: none; }

/* ---- The posts: the feed's dark column ---- */
.pf-feed {
  min-width: 0;
  /* clip, not hidden: the "New mssgs" pill sticks to the viewport inside it */
  overflow: hidden;
  overflow: clip;
  border-radius: 26px;
  background: #14171b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(20, 32, 24, .2);
  color: #e8eaed;
}
.pf-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pf-feed-head h2 {
  margin: 0;
  color: #fff;
  font: 700 21px/1.2 var(--font-display, 'Bricolage Grotesque', sans-serif);
  letter-spacing: -.02em;
}
.pf-feed .fp-list:empty { min-height: 120px; }
.pf-feed .fp:last-child { border-bottom: 0; }
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 24px 48px;
  color: #8d969f;
  text-align: center;
}
.pf-empty p { margin: 0; font-size: 15px; }
.pf-older {
  display: block;
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #6fd39b;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.pf-older:hover { background: rgba(255, 255, 255, .03); }
.pf-older.is-loading { opacity: .6; }

/* ---- Not found ---- */
.pf-missing { padding: 48px 28px; text-align: center; }
.pf-missing h1 {
  margin: 0 0 10px;
  color: var(--w-ink, #20301f);
  font: 700 30px/1.15 var(--font-display, 'Bricolage Grotesque', sans-serif);
}
.pf-missing p { margin: 0 0 24px; color: var(--w-mut, #525f4c); }

/* ============================================================
   Layers over the page: the picture, and the story viewer
   ============================================================ */
.pf-locked, .pf-locked body { overflow: hidden; }
.pf-layer {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(10, 12, 14, .92);
  animation: pfFade .18s ease-out;
}
.pf-layer button { font: inherit; }
@keyframes pfFade { from { opacity: 0; } }

.pf-photo { padding: 24px; cursor: zoom-out; }
.pf-photo-img {
  display: block;
  width: min(80vmin, 640px);
  height: min(80vmin, 640px);
  border-radius: 14%;
  object-fit: cover;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  cursor: default;
}
.pf-photo-close { position: absolute; top: 16px; right: 16px; }

.pf-sv-bg {
  position: absolute;
  inset: -80px;
  background-position: center;
  background-size: cover;
  filter: blur(48px) brightness(.4) saturate(1.2);
}
.pf-sv-frame {
  position: relative;
  z-index: 1;
  height: min(92vh, 900px);
  aspect-ratio: 9 / 16;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  user-select: none;
  -webkit-user-select: none;
}
.pf-sv-stage, .pf-sv-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-sv-media { display: block; object-fit: contain; background: #000; }
.pf-sv-frame::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 110px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.pf-sv-bars {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
}
.pf-sv-bar {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
}
.pf-sv-bar i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.pf-sv-head {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 12px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}
.pf-sv-who {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 14.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.pf-sv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sv-face { flex: none; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.pf-sv-when { flex: none; color: rgba(255, 255, 255, .78); }
.pf-sv-btn, .pf-sv-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.pf-sv-btn:hover, .pf-sv-close:hover { background: rgba(255, 255, 255, .14); }
.pf-sv-btn:focus-visible, .pf-sv-close:focus-visible, .pf-sv-arrow:focus-visible, .pf-sv-reveal:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pf-photo-close { background: rgba(255, 255, 255, .12); }

/* Tap the left of a story for the one before, the rest for the next. */
.pf-sv-tap {
  position: absolute;
  z-index: 2;
  top: 72px;
  bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pf-sv-tap-prev { left: 0; width: 34%; }
.pf-sv-tap-next { right: 0; width: 66%; }
.pf-sv-tap:disabled { cursor: default; }
.pf-sv-frame.is-held .pf-sv-bars, .pf-sv-frame.is-held .pf-sv-head { opacity: 0; transition: opacity .2s ease; }

.pf-sv-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.pf-sv-arrow:hover { background: rgba(255, 255, 255, .28); }
.pf-sv-arrow:disabled { opacity: 0; pointer-events: none; }

/* An 18+ story waits behind a veil until the reader asks for it. */
.pf-sv-frame.is-veiled .pf-sv-media { filter: blur(36px); transform: scale(1.1); }
.pf-sv-veil {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  text-align: center;
}
.pf-sv-veil[hidden] { display: none; }
.pf-sv-veil p { max-width: 260px; margin: 0; font-size: 15.5px; line-height: 1.45; }
.pf-sv-reveal {
  height: 40px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.pf-sv-reveal:hover { background: rgba(255, 255, 255, .22); }

/* ---- Small screens ---- */
@media (max-width: 760px) {
  .pf-sv-arrow { display: none; }
}
@media (max-width: 560px) {
  .pf { gap: 14px; padding: 96px 12px 56px; }
  .pf-card, .pf-feed { border-radius: 22px; }
  .pf-cover { height: 118px; }
  .pf-top { margin-top: -52px; padding: 0 16px; }
  .pf-avatar-in { width: 104px; height: 104px; border-width: 4px; border-radius: 27px; }
  .pf-avatar, .pf-has-story::before { border-radius: 31px; }
  .pf-has-story::before { inset: -4px; }
  .pf-body { padding: 12px 16px 20px; }
  .pf-name { font-size: 26px; }
  .pf-btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .pf-btn-ghost { width: 38px; padding: 0; }
  .pf-btn-ghost span { display: none; }
  /* Rows on a phone: the picture, then the name over what it means. */
  .pf-badges { gap: 8px; }
  .pf-badge {
    flex-basis: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 10px 14px;
    text-align: left;
  }
  .pf-badge::before { top: 50%; left: 34px; width: 56px; height: 44px; transform: translate(-50%, -50%); }
  .pf-badge img { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
  .pf-badge b { align-self: end; }
  .pf-badge span { align-self: start; }
  .pf-badges.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-badges.is-many .pf-badge::before { top: 4px; left: 50%; width: 56px; height: 40px; transform: translateX(-50%); }
  .pf-badges.is-many .pf-badge img { width: 42px; height: 42px; margin: 0 0 5px; }
  .pf-sv { gap: 0; }
  .pf-sv-frame { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
  /* Stories are made for a phone's screen: fill it, as the apps do. */
  .pf-sv-media { object-fit: cover; }
}
@media (max-width: 420px) {
  .pf-invite { gap: 10px; padding: 8px; }
  .pf-invite-icon { width: 40px; height: 40px; border-radius: 12px; }
  .pf-invite-text b {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .pf-invite-join { height: 34px; padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 360px) {
  .pf-avatar-in { width: 88px; height: 88px; border-radius: 24px; }
  .pf-avatar, .pf-has-story::before { border-radius: 28px; }
  .pf-top { margin-top: -44px; }
  .pf-btn-main { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-has-story::before { animation: none; }
  .pf-avatar-in { transition: none; }
  .pf-layer { animation: none; }
}

/* A private account: the card says so, where a bio would be. The span is
   not a button (no picture to open, no story). */
.pf-private {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(51, 117, 77, .09);
  color: var(--w-ink2, #33402f);
  font-size: 14.5px;
  font-weight: 600;
}
.pf-private svg { flex: none; color: var(--green-700, #1f4f34); }
span.pf-avatar { cursor: default; }