/* GENERATED FILE - DO NOT EDIT.
   Source: shared/profile-banner.css - run `npm run sync:shared` after editing. */

/* Profile banners — web profile + account header (.pfh) and the app's .pfa-banner slot.
   Markup: shared/profile-banner.js. Band = CSS gradients; art = one decorative SVG
   pinned right (scales with band height, avatar corner stays clear); pill = .pfh-board.
   Tiers: tier-gold (#1–3, is-first adds the one-shot sheen), tier-silver (#4+). */

.pfh[data-banner] {
  container: pfb / inline-size;
}

.pfh[data-banner],
.pfb-slot {
  --pfb-h: 8.5rem;
}
.pfh[data-banner] .pfh-band,
.pfb-slot .pfh-band {
  height: var(--pfb-h);
  overflow: hidden;
}

.pfb-art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* Explicit width (an SVG's auto width won't follow aspect-ratio): art scales with band height. */
  height: var(--pfb-h, 100%);
  width: calc(var(--pfb-h, 8.5rem) * 900 / 136);
  max-width: none;
  pointer-events: none;
}

.pfh[data-banner] .pfh-band::after,
.pfb-slot .pfh-band::after {
  z-index: 3;
}

.pfh[data-banner] .pfh-board,
.pfb-slot .pfh-board {
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 2rem);
  padding: 0.32rem 0.75rem;
  white-space: nowrap;
}

.pfh-board .pfb-dot-ico {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.pfh-board .pfb-sub {
  font-weight: 600;
  opacity: 0.75;
}

/* 1 — Default: forest band + Lakbi explorer on a dotted gold route */
.pfh--default .pfh-band {
  background:
    radial-gradient(60% 120% at 88% -10%, rgba(242, 207, 126, 0.32), transparent 60%),
    repeating-radial-gradient(circle at 82% 135%, rgba(242, 207, 126, 0.11) 0 1px, transparent 1px 16px),
    radial-gradient(rgba(251, 246, 236, 0.09) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(150deg, #2d5a45 0%, #1f3d30 55%, #16302a 100%);
}

/* 2 — Top creator: deep forest, gold-foil frame + rule, sunburst, rosette */
.pfh--creator .pfh-band {
  background:
    radial-gradient(45% 140% at 86% 50%, rgba(230, 201, 142, 0.3), transparent 70%),
    radial-gradient(rgba(230, 201, 142, 0.1) 1px, transparent 1.3px) 0 0 / 12px 12px,
    linear-gradient(150deg, #1f3d30 0%, #13251e 58%, #0d1b15 100%);
}
.pfh--creator .pfh-band::before {
  content: "";
  position: absolute;
  inset: 7px 7px 10px;
  z-index: 3;
  border-radius: 14px 14px 6px 6px;
  border: 1px solid rgba(230, 201, 142, 0.5);
  box-shadow: inset 0 0 0 3px rgba(19, 37, 30, 0.6), inset 0 0 0 4px rgba(230, 201, 142, 0.22);
  pointer-events: none;
}
.pfh--creator .pfh-band::after {
  height: 5px;
  opacity: 1;
  background: linear-gradient(90deg, #7a5c1c, #c9a14f 20%, #f7e7b8 45%, #e6c98e 55%, #c9a14f 75%, #7a5c1c);
}
.pfh--creator .pfh-board {
  background: linear-gradient(100deg, #c9a14f, #f7e7b8 50%, #d9b86c);
  color: #13251e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.pfh--creator.tier-silver .pfh-band {
  background:
    radial-gradient(45% 140% at 86% 50%, rgba(214, 220, 226, 0.22), transparent 70%),
    radial-gradient(rgba(214, 220, 226, 0.08) 1px, transparent 1.3px) 0 0 / 12px 12px,
    linear-gradient(150deg, #1f3d30 0%, #13251e 58%, #0d1b15 100%);
}
.pfh--creator.tier-silver .pfh-band::before {
  border-color: rgba(214, 220, 226, 0.5);
  box-shadow: inset 0 0 0 3px rgba(19, 37, 30, 0.6), inset 0 0 0 4px rgba(214, 220, 226, 0.2);
}
.pfh--creator.tier-silver .pfh-band::after {
  background: linear-gradient(90deg, #6f7780, #b9c0c7 20%, #f4f6f8 45%, #d5dade 55%, #b9c0c7 75%, #6f7780);
}
.pfh--creator.tier-silver .pfh-board {
  background: linear-gradient(100deg, #aeb6bd, #f4f6f8 50%, #c3cad0);
}

/* 3 — Most stamps: light passport visa page, guilloche, perforated navy edge */
.pfh--stamps .pfh-band {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='204' height='136'%3E%3Cg fill='none' stroke-width='.8'%3E%3Cpath d='M0 15 C34 8 68 22 102 15 S170 8 204 15 M0 30 C34 23 68 37 102 30 S170 23 204 30 M0 45 C34 38 68 52 102 45 S170 38 204 45 M0 60 C34 53 68 67 102 60 S170 53 204 60 M0 75 C34 68 68 82 102 75 S170 68 204 75 M0 90 C34 83 68 97 102 90 S170 83 204 90 M0 105 C34 98 68 112 102 105 S170 98 204 105 M0 120 C34 113 68 127 102 120 S170 113 204 120' stroke='rgba(43,63,107,.12)'/%3E%3Cpath d='M0 15 C34 22 68 8 102 15 S170 22 204 15 M0 45 C34 52 68 38 102 45 S170 52 204 45 M0 75 C34 82 68 68 102 75 S170 82 204 75 M0 105 C34 112 68 98 102 105 S170 112 204 105' stroke='rgba(192,100,63,.1)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 204px 136px,
    radial-gradient(50% 130% at 80% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(160deg, #f4eedd 0%, #ece4cd 60%, #e3dac0 100%);
}
.pfh--stamps .pfh-band::after {
  height: 4px;
  opacity: 1;
  background: radial-gradient(circle at 5px 2px, #e3dac0 1.6px, transparent 1.8px) 0 0 / 10px 4px, #2b3f6b;
}
.pfh--stamps .pfh-board {
  background: rgba(251, 246, 236, 0.85);
  color: #2b3f6b;
  border: 1.5px dashed rgba(43, 63, 107, 0.7);
  transform: rotate(-2deg);
}
.pfh--stamps.tier-silver .pfh-board {
  color: #4f5760;
  border-color: rgba(111, 119, 128, 0.75);
}
.pfh--stamps .pfh-avatar {
  box-shadow: 0 10px 26px rgba(19, 37, 30, 0.28), 0 0 0 1px rgba(43, 63, 107, 0.18);
}

/* 4 — Top contributor: warm clay crew band */
.pfh--crew .pfh-band {
  background:
    radial-gradient(55% 140% at 85% 30%, rgba(255, 214, 160, 0.35), transparent 65%),
    radial-gradient(rgba(251, 246, 236, 0.12) 1px, transparent 1.3px) 0 0 / 14px 14px,
    linear-gradient(150deg, #d17d52 0%, #c0643f 45%, #97452a 100%);
}
.pfh--crew .pfh-band::after {
  background: linear-gradient(90deg, #7a3a22, #e6c98e 50%, #7a3a22);
}
.pfh--crew .pfh-board {
  background: #fbf6ec;
  color: #9a4a2c;
}
.pfh--crew.tier-silver .pfh-band::after {
  background: linear-gradient(90deg, #6f7780, #f4f6f8 50%, #6f7780);
}
.pfh--crew.tier-silver .pfh-board {
  color: #5d656d;
}

/* ——— One-shot motion (≤1.7s, never loops; first view per session only) ——— */
.pfb-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, 0.38) 50%, transparent 62%);
  transform: translateX(-110%);
  animation: pfb-sheen 1.1s 0.5s cubic-bezier(0.3, 0.6, 0.3, 1) 1 forwards;
}
.tier-silver .pfb-sheen {
  display: none;
}
@keyframes pfb-sheen {
  to {
    transform: translateX(110%);
  }
}
.pfb-pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pfb-pop 0.7s 0.2s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes pfb-pop {
  from {
    transform: translateY(14px) scale(0.94);
    opacity: 0;
  }
}
.pfb-thunk {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pfb-thunk 0.18s 0.45s ease-out both;
}
@keyframes pfb-thunk {
  from {
    transform: scale(1.15);
    opacity: 0;
  }
}
.pfb-dot {
  animation: pfb-dot 0.3s calc(0.3s + var(--d, 0) * 60ms) ease-out both;
}
@keyframes pfb-dot {
  from {
    opacity: 0.25;
  }
}
.pfh--default .pfb-route {
  animation: pfb-route 1.4s 0.1s ease-out both;
}
@keyframes pfb-route {
  from {
    opacity: 0;
  }
}
.pfb-still .pfb-sheen {
  display: none;
}
.pfb-still .pfb-pop,
.pfb-still .pfb-thunk,
.pfb-still .pfb-dot,
.pfb-still .pfb-route {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .pfb-sheen {
    display: none;
  }
  .pfb-pop,
  .pfb-thunk,
  .pfb-dot,
  .pfh--default .pfb-route {
    animation: none;
  }
}

/* ——— Phone: art pinned right, pill drops its count, side stamps hidden, pass shifts ——— */
@container pfb (max-width: 30rem) {
  .pfh[data-banner] .pfh-band {
    --pfb-h: 7.5rem;
  }
  .pfh[data-banner] .pfh-board,
  .pfb-slot .pfh-board {
    top: 0.7rem;
    left: 0.75rem;
    font-size: 0.6rem;
    padding: 0.3rem 0.6rem;
  }
  .pfh-board .pfb-sub,
  .pfb-wide {
    display: none;
  }
  .pfb-shift-pass {
    transform: translate(16px, 17px) scale(0.9);
    transform-box: fill-box;
    transform-origin: 100% 0;
  }
}

/* ——— Award chips under the name (web; the app styles its own .pfa-award) ——— */
.pfb-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  margin-top: 0.55rem;
}
.pfb-award {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  max-width: 100%;
  padding: 0 0.75rem 0 0.4rem;
  border: 1px solid #ead9b0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0, #f8eed6);
  color: #6b5220;
  font: 500 0.78rem/1.1 var(--pf-body, "DM Sans", system-ui, sans-serif);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pfb-award strong {
  font-weight: 700;
  color: #4d3a14;
}
.pfb-award > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfb-award-icon {
  flex: none;
  color: #b8892f;
}
.pfb-award.is-first .pfb-award-icon {
  color: #c99a2e;
  filter: drop-shadow(0 1px 1px rgba(107, 82, 32, 0.25));
}
.pfb-award--crew .pfb-award-icon {
  color: #1f3d30;
}
.pfb-award--create .pfb-award-icon {
  color: #a8442a;
}
.pfb-award:focus-visible {
  outline: 2px solid #1f3d30;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pfb-award:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -6px rgba(107, 82, 32, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfb-award {
    transition: none;
  }
}

/* ——— App slot: the banner fills .pfa-banner (its own default band sits underneath) ——— */
.pfa-banner > .pfb-slot {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  container: pfb / inline-size;
}
/* Art at the phone size (7.5rem, as mocked), pinned to the bottom of the taller app slot;
   the pill sits in the room above it. */
.pfa-banner > .pfb-slot {
  --pfb-h: 7.5rem;
}
/* The avatar row overlaps the banner: keep it above the art. */
.pfa-hero .pfa-top {
  z-index: 2;
}
.pfa-banner > .pfb-slot .pfh-band {
  height: 100%;
}

/* The avatar sits over the band art (the art/frame/rule use z-index 2–4). */
.pfh[data-banner] .pfh-avatar {
  z-index: 5;
}