/* /profile/:username — design: mobile-app/design-v2/artifacts/profile-public-page.html
   (approved 2026-10-23). The app's profile (50b) on the web, one centred column;
   the map face is 50c on MapLibre + OpenFreeMap. Every class is pf- prefixed so
   it never meets the rest of the site's stylesheet. The phone bar (.pub-mbar)
   and the avatar gradients (.pub-f1…7) come from club.css. */

.pf-page {
  --pf-pad: var(--pad); /* the site's gutter, so the page's edges meet the header's */
  --pf-nav: 69px;
  --pf-green-50: #F0FDF4;
  --pf-green-7: #15803D;
  --pf-amber-50: #FFFBEB;
  --pf-amber-7: #B45309;
}
.pf { position: relative; }
.pf svg { flex: none; }
.pf [hidden], .pf-map[hidden] { display: none !important; }

/* ── Identity: the app's ProfileIdentity, top to bottom ── */
.pf-id { max-width: 640px; margin: 0 auto; padding: 22px var(--pf-pad) 0; text-align: center; }
.pf-av { --s: 104px; width: calc(var(--s) + 11px); height: calc(var(--s) + 11px); margin: 0 auto; border-radius: 50%; padding: 4px; border: 1.5px solid var(--teal-100); background: #FFFFFF; }
.pf-av__in { width: var(--s); height: var(--s); max-width: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--teal-50); color: var(--teal); font-size: 34px; font-weight: 700; }
.pf-nm { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pf-nm h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.017em; line-height: 1.2; }
.pf-tick { width: 20px; height: 20px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-hd { margin-top: 2px; font-size: 15px; color: var(--z-400); }
.pf-tt { margin-top: 4px; font-family: var(--emoji); font-size: 14px; font-weight: 600; color: var(--teal-7); }
.pf-badges { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pf-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pf-badge--ok { background: var(--pf-green-50); color: var(--pf-green-7); }
.pf-badge--warn { background: var(--pf-amber-50); color: var(--pf-amber-7); }
.pf-bio { margin: 10px auto 0; max-width: 300px; font-size: 15px; line-height: 21px; color: var(--z-700); }
.pf-bio p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pf-bio.is-open p { display: block; -webkit-line-clamp: unset; }
.pf-bio button { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--z-500); cursor: pointer; }
.pf-links { margin: 12px auto 0; display: flex; justify-content: center; gap: 6px; max-width: 100%; overflow: hidden; }
.pf-links.is-open { flex-wrap: wrap; }
.pf-ff { margin-top: 16px; display: flex; justify-content: center; align-items: baseline; gap: 36px; }
.pf-ff span { display: inline-flex; align-items: baseline; gap: 6px; color: var(--z-500); font-size: 14px; }
.pf-ff b { font-size: 17px; font-weight: 700; color: var(--z-900); }
.pf-meta { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-family: var(--emoji); font-size: 13.5px; color: var(--z-500); }
.pf-meta:empty { display: none; }
.pf-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pf-meta svg { width: 14px; height: 14px; color: var(--z-400); }
.pf-ints { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pf-int { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--teal-50); font-family: var(--emoji); font-size: 13px; font-weight: 600; color: var(--teal-7); }
.pf-flags { margin-top: 18px; }
.pf-flags__h { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; }
.pf-flags__h span { font-size: 13px; font-weight: 600; color: var(--z-500); }
.pf-flags__row { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: var(--emoji); font-size: 28px; line-height: 34px; }
.pf-acts { margin: 18px auto 0; max-width: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-acts .btn { height: 44px; font-size: 15px; padding: 0 12px; }
.pf-acts svg { width: 18px; height: 18px; }

/* ── Tabs: a short pill under the active one, no full-width rule (50b) ── */
.pf-tabs { max-width: 640px; margin: 22px auto 0; display: flex; }
.pf-tab { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--z-400); cursor: pointer; }
.pf-tab svg { width: 16px; height: 16px; }
.pf-tab em { font-style: normal; font-size: 12px; padding: 1px 6px; border-radius: 999px; background: var(--z-100); color: var(--z-400); }
.pf-tab.is-on, .pf-tab.is-on em { color: var(--z-900); }
.pf-tab.is-on::after { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 28px; height: 2.5px; border-radius: 2px; background: var(--z-900); }

/* ── Grid: 3:4 tiles, hairline gaps, the place along the bottom ── */
/* The same space under the tab row as the Trips tab (user, 2026-10-23: the design's 2 px read as no gap). */
.pf-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5px; }
.pf-tile { position: relative; aspect-ratio: 3 / 4; background: var(--z-100); overflow: hidden; display: block; }
.pf-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pf-tile::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .42)); }
.pf-tile__pl { position: absolute; left: 8px; right: 40px; bottom: 7px; z-index: 1; font-size: 11.5px; font-weight: 500; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tile__b { position: absolute; top: 6px; right: 6px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .45); display: grid; place-items: center; }
.pf-stk { position: relative; width: 11px; height: 11px; display: inline-block; }
.pf-stk i { position: absolute; width: 8px; height: 8px; border-radius: 2px; }
.pf-stk i:first-child { top: 0; right: 0; border: 1.5px solid #FFFFFF; }
.pf-stk i:last-child { bottom: 0; left: 0; background: #FFFFFF; }
.pf-tile__len { position: absolute; right: 6px; bottom: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 5px; background: rgba(0, 0, 0, .55); font-size: 10.5px; font-weight: 600; color: #FFFFFF; }
.pf-tile__len svg { width: 9px; height: 9px; fill: #FFFFFF; }
.pf-more { display: flex; justify-content: center; padding: 22px var(--pf-pad) 0; }
.pf-more .btn { gap: 6px; }
.pf-more .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ── Trips: the app's Discover list card (the cover is 16:9 since 2026-10-21) ── */
.pf-tgrid { display: grid; gap: 14px; padding: 16px var(--pf-pad) 0; }
.pf-tc { position: relative; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px -8px rgba(0, 0, 0, .18); overflow: hidden; }
.pf-tc__cv { aspect-ratio: 16 / 9; width: 100%; background: var(--z-200); overflow: hidden; }
.pf-tc__cv img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pf-tc__b { padding: 12px 14px 14px; }
.pf-tc__r1 { display: flex; align-items: center; gap: 10px; }
.pf-tc__name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--z-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tc__name::after { content: ""; position: absolute; inset: 0; }
.pf-pill { position: relative; z-index: 1; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--teal); color: #FFFFFF; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.pf-tc__by { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--z-500); white-space: nowrap; overflow: hidden; }
.pf-tc__by span { overflow: hidden; text-overflow: ellipsis; }
.pf-tc__by > i, .pf-faces > i > i { flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 700; color: #FFFFFF; }
.pf-tc__by > i img, .pf-faces > i > i img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pf-tc__f { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--z-500); }
.pf-tc__f > span { display: inline-flex; align-items: center; gap: 4px; }
.pf-tc__f svg { width: 12px; height: 12px; }
.pf-faces { font-weight: 600; gap: 5px !important; }
.pf-faces > i { display: inline-flex; font-style: normal; }
.pf-faces > i > i { border: 1.5px solid #FFFFFF; margin-left: -6px; }
.pf-faces > i > i:first-child { margin-left: 0; }
.pf-cc { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.pf-cc span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: var(--z-100); font-size: 10.5px; font-weight: 600; color: var(--z-700); }
.pf-cc svg { width: 9px; height: 9px; color: var(--z-500); }

/* ── Empty grid ── */
.pf-emptyfp { padding: 44px var(--pf-pad) 20px; text-align: center; }
.pf-halo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--teal-50); display: grid; place-items: center; color: var(--teal); }
.pf-emptyfp b { display: block; font-size: 16px; font-weight: 700; }
.pf-emptyfp span { display: block; margin-top: 4px; font-size: 14px; color: var(--z-500); }

/* ── Map button: the app's header map button, top-end; same spot on both faces ── */
.pf-top { position: relative; max-width: 1000px; margin: 0 auto; height: 0; z-index: 5; }
.pf-mapbtn { position: absolute; top: 14px; right: var(--pf-pad); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--z-100); color: var(--z-700); display: grid; place-items: center; cursor: pointer; }
.pf-mapbtn svg { width: 19px; height: 19px; }
.pf-map .pf-mapbtn { background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
/* The design's 56 px above the footer. */
.pf-body { padding-bottom: 56px; }

/* ── Map face (50c on a free, flat map) ── */
.pf-map { position: fixed; top: var(--pf-nav); left: 0; right: 0; bottom: 0; z-index: 30; overflow: hidden; background: #9EC1F7; }
.pf-map .pf-top { position: absolute; top: 0; left: 0; right: 0; }
/* MapLibre makes its container position: relative, so the size is set outright. */
.pf-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.pf-map-on .pf, body.pf-map-on .foot, body.pf-map-on .pub-mbar { display: none; }
.pf-stat { position: absolute; top: 14px; left: 50%; translate: -50% 0; z-index: 4; width: min(360px, calc(100% - 2 * var(--pf-pad) - 112px)); display: flex; padding: 11px 0; border-radius: 16px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0, 0, 0, .10); }
.pf-stat div { flex: 1; text-align: center; }
.pf-stat b { display: block; font-size: 17px; font-weight: 700; }
.pf-stat span { display: block; margin-top: 1px; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--z-400); }
.pf-stat i { width: 1px; background: var(--z-200); margin: 3px 0; }
.pf-reset { position: absolute; right: 18px; bottom: 206px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #FFFFFF; color: var(--z-800); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer; }
.pf-pin { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.pf-pin__chip { display: none; margin-bottom: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 11px; font-weight: 600; color: var(--z-900); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.pf-pin__ph { width: 44px; height: 44px; border-radius: 12px; border: 2.5px solid #FFFFFF; overflow: hidden; background: var(--z-300); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.pf-pin__ph img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pf-pin__stem { width: 2.5px; height: 10px; background: #FFFFFF; margin-top: -1px; }
.pf-pin__gd { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); border: 1.5px solid #FFFFFF; margin-top: -1px; }
.pf-pin.is-sel .pf-pin__chip { display: block; }
.pf-pin.is-sel .pf-pin__ph { width: 56px; height: 56px; border: 3px solid var(--teal); box-shadow: 0 4px 14px rgba(13, 148, 136, .45); }
.pf-pin.is-sel .pf-pin__stem { background: var(--teal); height: 12px; }
.pf-strip { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4; display: flex; gap: 12px; padding: 0 18px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; }
.pf-strip::-webkit-scrollbar { display: none; }
.pf-fcard { flex: none; position: relative; width: 360px; height: 168px; border-radius: 16px; overflow: hidden; background: var(--z-300); box-shadow: 0 1px 4px rgba(0, 0, 0, .09); color: #FFFFFF; scroll-snap-align: start; }
.pf-fcard img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pf-fcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, .22) 50%, rgba(0, 0, 0, .78) 100%); }
.pf-fcard__t { position: absolute; left: 13px; right: 13px; bottom: 13px; z-index: 1; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.pf-fcard__t b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-fcard__t span { font-size: 12px; opacity: .9; }
.pf-fcard__t em { font-style: normal; font-size: 12.5px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pf-fcard__bd { position: absolute; top: 9px; right: 9px; z-index: 1; height: 24px; min-width: 24px; padding: 0 7px; border-radius: 999px; background: rgba(16, 18, 20, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pf-fcard__bd svg { width: 10px; height: 10px; fill: #FFFFFF; }
.pf-credit { position: absolute; left: 8px; bottom: 190px; z-index: 3; font-size: 10px; color: var(--z-600); background: rgba(255, 255, 255, .7); padding: 1px 5px; border-radius: 4px; }
.pf-credit a { color: inherit; }
.pf-map__err { position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 4; padding: 12px 16px; border-radius: 14px; background: #FFFFFF; font-size: 14px; color: var(--z-700); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }

@media (max-width: 759px) {
  .pf-page .foot { padding-bottom: 110px; }
  .pf-strip { padding: 0 36px 6px; scroll-padding: 0 36px; }
  .pf-fcard { width: min(319px, calc(100vw - 72px)); scroll-snap-align: center; }
  .pf-reset { right: 16px; }
}
@media (min-width: 760px) {
  .pf-id { padding-top: 40px; }
  .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tabs { margin-top: 26px; }
}
@media (min-width: 1024px) {
  /* A centred column here, not on the header's edges: its own inner margin. */
  .pf-page { --pf-pad: 24px; }
  .pf-id { padding-top: 48px; }
  .pf-av { --s: 128px; }
  .pf-av__in { font-size: 40px; }
  .pf-nm h1 { font-size: 30px; }
  .pf-tick { width: 24px; height: 24px; }
  .pf-bio { max-width: 420px; }
  .pf-tabs { max-width: 1000px; }
  .pf-body { max-width: 1000px; margin: 0 auto; }
  .pf-grid { margin-top: 20px; gap: 3px; }
  .pf-tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 0 0; }
}