/* Profile showcase + Explore profiles (SITE-UPGRADE phase 3): the public collector profile, the owner profile and the
   Collectors index as a centre-line gallery. Presentation only; loaded with community.css / profile-studio.css. */

asm-viewer:not(:defined) { display: block; }

/* The centre-line header pieces these pages draw in their first screen. motion/line.css carries them too but loads
   after first paint on the portal pages, so the layout-relevant rules are repeated here (render-blocking, no shift). */
:root { --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.mono-label { margin: 0; font: 500 11px/1.25 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* grid 1fr auto 1fr: the pill sits on the true centre line even when the side labels differ in width */
.lhead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; max-width: 1320px; margin: 0 auto 22px; }
.lhead-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lhead-side:first-child { grid-column: 1; justify-self: stretch; } .lhead-side:last-child { grid-column: 3; justify-self: stretch; }
.lhead-side > i { flex: 1 1 0; height: 1px; background: var(--line-strong); }
.lhead-side > .mono-label { flex: none; color: var(--subtle); white-space: nowrap; }
.lhead-k { flex: none; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-deepest, #08090a); color: var(--ink-secondary); }
@media (max-width: 750px) { .lhead { column-gap: 10px; } .lhead-side { gap: 10px; } .lhead-side > .mono-label { display: none; } }

/* ---------------------------------------------------------------- Explore profiles (the index) */
body[data-page="collectors"] .portal-main { position: relative; isolation: isolate; }
.explore-hero { position: relative; margin: 0 0 26px; padding: 8px 0 0; text-align: center; }
.explore-hero .lhead { margin-bottom: 18px; }
.explore-hero h1 { margin: 0 auto; font: 600 clamp(48px, 8vw, 112px)/.9 var(--display, 'Oswald', sans-serif); letter-spacing: .005em; text-transform: uppercase; }
body[data-page="collectors"] .explore-hero .portal-title { justify-content: center; text-align: center; }
body[data-page="collectors"] .explore-hero h1 { text-align: center; }
body[data-page="collectors"] .explore-hero .community-intro { text-align: center;  max-width: 58ch; margin: 16px auto 0; color: var(--ink-secondary); font-size: 16px; line-height: 1.55; }
.explore-hero .community-search { max-width: 640px; margin: 22px auto 0; }
.explore-band { position: relative; margin: 26px 0 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; aspect-ratio: 16 / 5; background: #0d0e10; }
.explore-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.explore-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 10, .1), rgba(8, 9, 10, .55)); pointer-events: none; }
.explore-band figcaption { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; gap: 10px; }
.explore-band figcaption .mono-label { padding: 7px 11px; border-radius: 999px; background: rgba(8, 9, 10, .76); color: #d4d6da; }
.collectors-hero.is-profile .explore-band, .collectors-hero.is-profile .lhead, .collectors-hero.is-collection .explore-band, .collectors-hero.is-collection .lhead { display: none; }
.collectors-hero.is-profile h1, .collectors-hero.is-collection h1 { font-size: clamp(30px, 5vw, 52px); }
/* The results area keeps its room while cards load, so the footer never jumps into view (CLS). */
body[data-page="collectors"] #collector-results { min-height: 70vh; align-content: start; }

body[data-page="collectors"] .explore-card { background: #0f1012; border-color: var(--line-strong); }
body[data-page="collectors"] .explore-card .collector-card-banner { height: 88px; }
.explore-main { display: grid; grid-template-columns: 108px minmax(0, 1fr); flex: 1; }
.explore-still { position: relative; margin: -30px 0 16px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #dedee0; overflow: hidden; align-self: start; aspect-ratio: 9 / 16; z-index: 1; }
/* The renders share one light-grey backdrop (#dedee0), the panel's colour: stacked head to toe, each slot zoomed to the
   share of its frame its piece fills and clipped to its own row, they read as one standing character (no blend modes:
   those cost a phone a paint layer per image). */
.explore-still ul, .sc-stack { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 6% 0; list-style: none; }
.explore-still ul { height: 100%; }
.explore-still li, .sc-stack li { flex: 1 1 0; width: 100%; min-height: 0; overflow: hidden; }
.explore-still li[data-slot="hat"], .sc-stack li[data-slot="hat"] { flex-grow: .8; }
.explore-still li[data-slot="mask"], .sc-stack li[data-slot="mask"] { flex-grow: 1.15; }
.explore-still li[data-slot="pants"], .sc-stack li[data-slot="pants"] { flex-grow: 1.1; }
.explore-still li[data-slot="shoes"], .sc-stack li[data-slot="shoes"] { flex-grow: .55; }
.explore-still img, .sc-stack img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.25); }
.explore-still li[data-slot="top"] img, .sc-stack li[data-slot="top"] img { transform: scale(1.75); }
.explore-still li[data-slot="pants"] img, .sc-stack li[data-slot="pants"] img { transform: scale(1.3); }
.explore-still li[data-slot="shoes"] img, .sc-stack li[data-slot="shoes"] img { transform: scale(2.1); }
.explore-still.is-empty { display: grid; place-items: center; color: #6c6f75; font: 600 12px/1 var(--mono, monospace); letter-spacing: .14em; }
.explore-still.is-empty i { font-style: normal; }
body[data-page="collectors"] .explore-card .collector-card-body { padding: 0 16px 16px 14px; }
body[data-page="collectors"] .explore-card .collector-avatar-ring { width: 64px; height: 64px; margin: -32px 0 8px; background: #f2f2f0; }
.explore-facts { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 10px; color: var(--muted); font: 500 10px/1.35 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; }
.explore-facts b { color: var(--ink); font-weight: 500; }
@media (max-width: 420px) { .explore-main { grid-template-columns: 92px minmax(0, 1fr); } }

/* ---------------------------------------------------------------- the public profile */
body.portal[data-page="collectors"] .collector-detail.showcase .collector-hero { border-color: var(--line-strong); background: #0d0e10; }
@media (min-width: 900px) {
  body.portal[data-page="collectors"] .showcase .collector-identity { flex-direction: column; align-items: center; margin-top: -78px; text-align: center; }
  body.portal[data-page="collectors"] .showcase .collector-identity-copy { padding-top: 0; margin: 0 auto; }
  .showcase .collector-identity .collector-avatar-ring { width: 148px; height: 148px; margin: 0 0 14px; }
  .showcase .collector-handles, .showcase .community-badges, .showcase .collector-socials, .showcase .collector-wallet { justify-content: center; }
  .showcase .collector-bio { margin-left: auto !important; margin-right: auto !important; max-width: 60ch; }
}
.showcase .sc-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: 6px 12px; margin-top: 14px; }
@media (min-width: 900px) { .showcase .sc-share { justify-content: center; } }
.sc-share-status:empty { display: none; }
.sc-share-status { color: var(--ink-secondary); }
.sc-share-note { margin: 10px 0 0; color: var(--subtle); }
.sc-share .sc-share-note { flex-basis: 100%; margin: 4px 0 0; font: 400 12px/1.45 'Inter', sans-serif; letter-spacing: 0; text-transform: none; }
.sc-joined { margin: 10px 0 0; color: var(--subtle); }

.sc-look { position: relative; margin: 34px 0; }
.sc-look .lhead { margin-bottom: 16px; }
.sc-look .lhead-side .mono-label { white-space: nowrap; }
.sc-look .community-wardrobe-heading { justify-content: center; text-align: center; }
.sc-look .community-wardrobe-heading > div { margin: 0 auto; }
.sc-look .community-look-side > .mono-label { margin: 2px 0 12px; }
.sc-pet-chip { top: 12px; right: 12px; left: auto !important; }
.sc-pet-chip i, .sc-pose i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-secondary); }

/* phones: the still over the stage until the viewer is live */
.sc-still { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; padding: 46px 16px 18px; background: #dedee0; transition: opacity .4s ease; }
.is-live > .sc-still { opacity: 0; pointer-events: none; }
.sc-stack { width: min(70%, 280px); height: 100%; }
.sc-load { min-height: 44px; }
body[data-page="collectors"] .community-look-stage.has-still { min-height: 380px; }
body[data-page="collectors"] .community-look-stage.has-still > span { z-index: 3; }
body[data-page="collectors"] .community-look-stage.has-still > .community-stage-hint { display: none; }
.studio-stage.has-still { min-height: 420px; }
.studio-stage.has-still .studio-stage-hint { display: none; }
.has-still.is-live .community-stage-hint, .has-still.is-live .studio-stage-hint { display: inline-flex; }

/* poses */
.sc-poses { margin: 16px 0 0; }
.sc-poses ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.sc-pose { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-secondary); font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sc-pose.is-on { border-color: rgba(255, 255, 255, .5); color: var(--ink); }
.sc-pose b { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.sc-pose.is-free { color: var(--muted); }

/* rarest pieces */
.sc-rare { margin: 34px 0; padding: 22px; border: 1px solid var(--line-strong); border-radius: 18px; background: #0d0e10; }
.sc-head h2 { margin: 6px 0 6px; font: 600 clamp(28px, 4vw, 44px)/.95 var(--display, 'Oswald', sans-serif); text-transform: uppercase; }
.sc-copy { margin: 0 0 16px; color: var(--ink-secondary); font-size: 14px; }
.sc-rare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Rarity shows as a small dot and a label only (Connor, 2026-10-13: no big colour fills or glows on the website). */
.sc-rare-item { --tone: var(--rarity-common); display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: #0f1012; }
.sc-rare-item[data-tone="uncommon"] { --tone: var(--rarity-uncommon); } .sc-rare-item[data-tone="rare"] { --tone: var(--rarity-rare); } .sc-rare-item[data-tone="very-rare"] { --tone: var(--rarity-very-rare); }
.sc-rare-item[data-tone="epic"] { --tone: var(--rarity-epic); } .sc-rare-item[data-tone="legendary"] { --tone: var(--rarity-legendary); } .sc-rare-item[data-tone="mythic"], .sc-rare-item[data-tone="super-rare"] { --tone: var(--rarity-mythic); }
.sc-rare-item .mono-label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--tone); vertical-align: 1px; }
.sc-rare-art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #1a1b1e; }
.sc-rare-art img { width: 100%; height: 100%; object-fit: cover; }
.sc-rare-art i { display: grid; place-items: center; height: 100%; color: var(--muted); font-style: normal; font-size: 12px; }
.sc-super { position: absolute; left: 8px; top: 8px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(8, 9, 10, .82); color: #fff; font: 600 9px/1 var(--mono, monospace); letter-spacing: .14em; }
.sc-rare-item strong { font-size: 14px; line-height: 1.25; }
.sc-rare-item .mono-label { font-size: 10px; color: var(--ink-secondary); }

/* ---------------------------------------------------------------- the owner profile */
body[data-page="profile"] .studio-hero { border-color: var(--line-strong); }
#profile-share { flex: 1 1 100%; }
#profile-share .sc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#profile-pet:empty { display: none; }
#profile-pet { position: absolute; z-index: 3; right: 12px; top: 12px; }
#profile-pet .sc-pet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(12, 12, 12, .72); color: #e2e2e2; font: 700 9px/1 'Inter', sans-serif; letter-spacing: .14em; }
#profile-rarest:empty { display: none; }
#profile-rarest .sc-rare { margin: 0 16px 16px; }
/* Desktop: the identity on the centre line (KCB): avatar, name, handle and actions stacked and centred over the banner. */
@media (min-width: 900px) {
  body[data-page="profile"] .studio-hero-banner { height: 210px; }
  body[data-page="profile"] .studio-hero-body { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; text-align: center; margin-top: -76px; }
  body[data-page="profile"] .studio-avatar-ring { width: 136px; height: 136px; }
  body[data-page="profile"] .studio-hero-meta, body[data-page="profile"] .studio-hero-actions { justify-content: center; }
  body[data-page="profile"] .studio-hero-copy { justify-items: center; }
  body[data-page="profile"] .studio-hero-actions { max-width: 760px; }
  body[data-page="profile"] .studio-hero-actions .button { flex: 0 1 auto; }
  #profile-share { flex: 1 1 100%; display: flex; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sc-still { transition: none; } }

/* A profile link (?slug=) paints as a profile from the first frame: the index-only hero parts never show, so nothing
   jumps when portal.js switches the view. */
html.is-profile-view .explore-hero :is(.lhead, .explore-band, .community-intro, .community-search) { display: none; }
html.is-profile-view .explore-hero #collector-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-profile-view .explore-hero { margin-bottom: 8px; }

/* The owner hero keeps the room its signed-in actions need (VIEW PUBLIC PROFILE, OPEN WARDROBE, SHARE MY PROFILE), so
   the page below does not jump when the profile arrives (CLS). */
body[data-page="profile"] .studio-hero-actions { min-height: 152px; align-content: flex-start; }
@media (min-width: 560px) { body[data-page="profile"] .studio-hero-actions { min-height: 98px; } }

/* The owner's avatar ring is neutral (it took the rarest equipped tone before): no colour glows on the website. */
body[data-page="profile"] .studio-avatar-ring { --tone: #d9dadc !important; background: conic-gradient(from 210deg, #f2f2f0, #6f7279, #f2f2f0); box-shadow: 0 0 0 4px var(--studio-panel, #161616); }

/* ---------------------------------------------------------------- the centre line on every width (2026-10-13) */
body[data-page="profile"] .studio-hero-body { justify-items: center; text-align: center; }
body[data-page="profile"] .studio-hero-meta, body[data-page="profile"] .studio-hero-actions, body[data-page="profile"] .studio-hero-copy { justify-content: center; justify-items: center; }
body[data-page="profile"] .studio-status { text-align: center; justify-content: center; }
body[data-page="profile"] #profile-share .sc-share { justify-content: center; }
body.portal[data-page="collectors"] .showcase .collector-identity { align-items: center; text-align: center; }
body.portal[data-page="collectors"] .showcase .collector-identity-copy { margin-inline: auto; }
.showcase :is(.collector-handles, .community-badges, .collector-socials, .collector-wallet, .sc-share) { justify-content: center; }
.showcase .community-section-heading, .showcase .sc-head { justify-content: center; text-align: center; }
.showcase .community-section-heading > div { margin-inline: auto; }
.sc-look .community-look-side > .mono-label, .sc-poses { text-align: center; }
.sc-poses ul { justify-content: center; }
body[data-page="collectors"] #collector-status { text-align: center; }
/* Explore: the cards sit centred, and a short last row stays in the middle. */
body.portal[data-page="collectors"] .collector-grid:not(:has(.collector-detail, .collector-collection-detail, .community-empty)) { display: flex; flex-wrap: wrap; justify-content: center; }
body.portal[data-page="collectors"] .collector-grid:not(:has(.collector-detail, .collector-collection-detail, .community-empty)) > .collector-card { flex: 0 1 380px; }

/* Phones: the sections below the look are laid out only as they come near the screen, so the banner (the LCP) paints
   sooner on a public profile. */
@media (max-width: 860px) {
  .showcase > :is(.sc-rare, .community-showcase) { content-visibility: auto; contain-intrinsic-size: auto 560px; }
}