/* ===== Public user profile (/u/{username}) ==================================
   A lightweight identity + discovery surface — GitHub-profile / Substack-
   author-page energy, NOT a social feed. Identity header, a hairline
   reputation strip, then the published-work list. Floating treatment: no
   panels, hairline dividers, white-outline controls. (Not to be confused
   with pages/profile.css — the legacy global sheet topic pages still use.) */

.pf-page {
  max-width: 860px; margin: 0 auto; padding: 44px 20px 80px;
  color: #fff; font-variant-numeric: tabular-nums;
}
/* Side walls flanking the content column, X-style (desktop only). */
@media (min-width: 641px) {
  .pf-page {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .pf-page.has-banner { padding-top: 0; }   /* banner hugs the chrome */
  /* Follow (or the own-profile gear) rides the right edge, X-style. */
  .pf-name-row .pf-btn, .pf-name-row .pf-gear { margin-left: auto; }
}

/* ---- banner (X-style header image) ---- */
.pf-banner {
  position: relative;
  aspect-ratio: 3 / 1; max-height: 260px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.pf-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
/* Divider between banner and content — spans the page column (past the 20px
   gutter to the side walls) and passes BEHIND the overlapping avatar. */
.pf-banner::after {
  content: ''; position: absolute; left: -20px; right: -20px; bottom: -1px;
  height: 1px; background: rgba(255, 255, 255, 0.08);
}
/* Desktop: the header (avatar included) sits fully below the divider.
   Mobile overrides pull the avatar up over the banner edge instead. */
.has-banner .pf-head { margin-top: 18px; }
@media (max-width: 640px) {
  .has-banner .pf-avatar,
  .has-banner.pf-page img.pf-avatar,
  .page-profile .has-banner img.pf-avatar {
    position: relative;   /* paints above the banner's ::after divider */
    border: 4px solid var(--color-bg-base, #14171b);
  }
}

/* ---- identity header ----
   Grid: avatar | name/meta/links, with the bio (a direct child) spanning
   full width underneath. */
.pf-head {
  display: grid; grid-template-columns: auto 1fr; column-gap: 22px;
  align-items: start;
}
.pf-avatar,
.page-profile img.pf-avatar {
  width: 88px; height: 88px; flex: none; border-radius: 50%;
  object-fit: cover; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pf-head .pf-bio { grid-column: 1 / -1; margin-top: 10px; }
.pf-id { flex: 1; min-width: 0; }
.pf-name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pf-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.pf-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px;
  margin: 0; width: auto; border-radius: 9px; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45); color: #fff;
  font: 700 12.5px Inter, sans-serif; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pf-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); }
.pf-btn:disabled { opacity: 0.45; cursor: default; }
.pf-btn:focus { outline: none; box-shadow: none; }
.pf-btn-solid { background: #fff; color: var(--color-bg-base, #14171b); border-color: #fff; }
.pf-btn-solid:hover { background: rgba(255, 255, 255, 0.88); }
.pf-meta { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
.pf-meta-dot { margin: 0 7px; color: rgba(255, 255, 255, 0.3); }
.pf-bio { margin: 10px 0 0; max-width: 560px; font-size: 14px; line-height: 1.5; color: #fff; }

/* Fanbase Game stamp — the flag, worn on the name row */
.pf-fanstamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 5px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none;
  transition: border-color 0.15s ease;
}
.pf-fanstamp:hover { border-color: rgba(255, 255, 255, 0.5); }
.pf-fanstamp-logo,
.page-profile img.pf-fanstamp-logo { width: 16px; height: 16px; flex: none; object-fit: contain; background: transparent; }

/* social + custom links — small white-outline chips */
.pf-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.pf-link {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pf-link:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }

/* favorite team chips — below the identity header; link to the team topic */
.pf-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-team {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 6px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.8);
  font-size: 11.5px; font-weight: 700; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pf-team:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.pf-team-logo,
.page-profile img.pf-team-logo { width: 18px; height: 18px; flex: none; object-fit: contain; background: transparent; }

/* ---- published work ---- */
.pf-work { margin-top: 20px; }
.pf-row {
  display: flex; gap: 16px; padding: 18px 0; text-decoration: none; color: inherit;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-row:hover .pf-row-title { text-decoration: underline; text-underline-offset: 3px; }
.pf-row-thumb {
  position: relative; flex: none; width: 104px; height: 72px; border-radius: 10px;
  overflow: hidden; background: rgba(255, 255, 255, 0.05);
}
.pf-row-thumb img,
.page-profile .pf-row-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-row-body { flex: 1; min-width: 0; }
.pf-row-meta { display: flex; align-items: center; margin-bottom: 5px; font-size: 11px; color: rgba(255, 255, 255, 0.42); }
.pf-row-type { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pf-row-title {
  display: block; font-size: 15.5px; font-weight: 700; line-height: 1.32; color: #fff;
}
.pf-row-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55);
}

/* empty state */
.pf-empty { padding: 44px 0 20px; text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 14px; }
.pf-empty p { margin: 0 0 14px; }
.pf-empty-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.38); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  /* Full viewport width: Pico's .container gutter goes; the page keeps a
     slim 14px gutter of its own. */
  .page-profile main.container { padding-left: 0; padding-right: 0; max-width: none; }
  .pf-page { padding: 10px 14px 60px; }
  /* Big avatar on the left; name + links in the column to its right,
     bio spanning full width below (base rule). */
  .pf-head { column-gap: 14px; }
  .pf-banner {
    margin: -10px -14px 0; border-radius: 0;   /* edge-to-edge, flush under the ticker */
  }
  .pf-banner::after { left: 0; right: 0; }
  .has-banner .pf-head { margin-top: -28px; }
  .has-banner .pf-id { padding-top: 34px; }
  .pf-avatar, .page-profile img.pf-avatar { width: 112px; height: 112px; }
  .pf-name { font-size: 21px; }
  .pf-work { margin-top: 14px; }
  .pf-row-thumb { width: 84px; height: 60px; }
  /* Divider hairlines span the full viewport, X-style: pull the bordered
     elements past the page gutter and give the space back as padding. */
  .pf-tabs, .pf-row, .pf-take, .pf-feed .rkp-card.is-flush {
    margin-left: -14px; margin-right: -14px;
    padding-left: 14px; padding-right: 14px;
  }
}

/* Own-profile settings gear (replaces the Edit profile text button) */
.pf-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  color: rgba(255, 255, 255, 0.55); text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.pf-gear:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---- tab bar (one "Posts" tab for now; facets come later) ---- */
.pf-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.pf-tab {
  margin: 0 0 -1px; width: auto; padding: 9px 14px 11px; border: none; border-radius: 0;
  background: transparent; box-shadow: none; cursor: pointer;
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.42);
  border-bottom: 2px solid transparent;
}
.pf-tab.is-on { color: #fff; border-bottom-color: #fff; }
.pf-tab:focus { box-shadow: none; outline: none; }
.pf-tab-n { color: rgba(255, 255, 255, 0.35); font-weight: 600; }

/* The merged feed — boards (flush SIBoardCards), collection rows, and
   takes in one hairline-divided column. The rail-scale flush type is
   bumped back up to timeline scale here. */
.pf-feed { display: flex; flex-direction: column; }
/* ID selector: must outrank .rkp-card.is-flush { border: none } or a board
   that follows a take loses its divider. */
#pfFeed > * { border-top: 1px solid rgba(255, 255, 255, 0.08); }
#pfFeed > :first-child { border-top: none; }   /* tab bar's line covers it */
.pf-feed > :first-child { border-top: none; }
.pf-feed .rkp-card.is-flush { padding-top: 16px; padding-bottom: 16px; gap: 10px; }
.pf-feed .rkp-card.is-flush .rkp-cav { width: 22px; height: 22px; }
.pf-feed .rkp-card.is-flush .rkp-cuser { font-size: 12.5px; }
.pf-feed .rkp-card.is-flush .rkp-cmeta { font-size: 11px; }
.pf-feed .rkp-card.is-flush .rkp-ctitle { font-size: 15.5px; }
.pf-feed .rkp-card.is-flush .rkp-cprev { gap: 7px; }
.pf-feed .rkp-card.is-flush .rkp-crank { font-size: 12px; width: 14px; }
.pf-feed .rkp-card.is-flush .rkp-cface,
.pf-feed .rkp-card.is-flush img.rkp-cface { width: 22px; height: 22px; }
.pf-feed .rkp-card.is-flush .rkp-cname { font-size: 13px; }
.pf-feed .rkp-card.is-flush .rkp-cmore { font-size: 11px; margin-left: 22px; }
.pf-feed .rkp-card.is-flush .rkp-cfoot { font-size: 12px; }

/* ---- Boards / Articles panels — /leaderboard-style boxed cards ---- */
.pf-panel { min-width: 0; }
.pf-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px; margin-top: 18px;
}
.pf-art-card {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pf-art-card:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.02); }
.pf-art-thumb { display: block; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, 0.05); }
.pf-art-thumb img,
.page-profile .pf-art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-art-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 18px 17px; }
.pf-art-meta { display: flex; align-items: center; font-size: 11px; color: rgba(255, 255, 255, 0.42); }
.pf-art-title { font-size: 15.5px; font-weight: 800; line-height: 1.3; color: #fff; }
.pf-art-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55);
}

/* Takes — flat rows in the merged feed, wearing the board-post anatomy:
   author row (avatar + name, date top-right) then the take text. */
.pf-take {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 16px; padding-bottom: 16px;   /* vertical only — the mobile
     full-bleed rule owns the horizontal padding (source order!) */
  border-top: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; color: inherit;
}
.pf-take-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pf-take-av,
.page-profile img.pf-take-av {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none;
  background: rgba(255, 255, 255, 0.08);
}
.pf-take-user { font-size: 12.5px; font-weight: 700; color: #fff; }
.pf-take-when { margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, 0.3); white-space: nowrap; }
.pf-take-text { font-size: 14.5px; line-height: 1.55; color: #fff; }
.pf-take:hover .pf-take-text { text-decoration: underline; text-underline-offset: 3px; }
.pf-take-meta { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: rgba(255, 255, 255, 0.42); }
.pf-take-score { color: #47c47d; font-weight: 700; }
/* X-repost-style eyebrow: "commented on {post} →" above the author row */
.pf-take-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.42);
  transition: color 0.15s ease;
}
.pf-take-eyebrow svg { flex: none; }
.pf-take:hover .pf-take-eyebrow { color: rgba(255, 255, 255, 0.85); }