/* Holder perks (HOLDER-PERKS/PLAN.md §7): tier chips, partner chips, the Profile perks panel and
   the name tone on public profiles. Tier colours are the existing rarity tokens (Holder = Epic,
   OG = Legendary, Whale = Mythic) and appear only where they mean a tier; partner and VERIFIED
   chips stay grey, so a card carries one colour. No colour of its own is defined here. */
[data-holder-tier="holder"] { --tier: var(--rarity-epic); }
[data-holder-tier="og"] { --tier: var(--rarity-legendary); }
[data-holder-tier="whale"] { --tier: var(--rarity-mythic); }

.holder-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.holder-chip.holder-chip-tier[data-holder-tier] { border-color: color-mix(in srgb, var(--tier) 60%, transparent); background: color-mix(in srgb, var(--tier) 12%, transparent); color: color-mix(in srgb, var(--tier) 70%, #fff); }
.holder-chip.holder-chip-partner.is-off { opacity: .55; }
li.holder-chip { list-style: none; }

/* The name takes the tier tone: the Profile hero, the Collectors cards and the public profile hero. */
.portal[data-page="profile"] #profile-name[data-holder-tier],
body[data-page="collectors"] .collector-card h2[data-holder-tier] a,
body.portal[data-page="collectors"] .collector-identity .collector-name[data-holder-tier],
.collector-detail .collector-identity-copy > .eyebrow[data-holder-tier],
.collector-card .eyebrow[data-holder-tier] { color: color-mix(in srgb, var(--tier) 70%, #fff); }
#profile-holder-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#profile-holder-chips:empty { display: none; }
.collector-detail .collector-partner-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; vertical-align: middle; }
.community-badges li.holder-chip { min-height: 28px; }

/* The Profile perks panel: its own panel under "Collections held", saved on its own. */
.studio-perks { display: grid; gap: 14px; padding: 20px; border-top: 1px solid var(--studio-line, var(--line)); }
.studio-perks .studio-card-head { align-items: flex-start; }
.holder-perks-checked { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
/* RE-CHECK / CHECK AGAIN / GOT IT are text links, not boxes: no background or border of their own, 44px tall to tap. */
.portal .studio-perks button.underlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--ink-secondary, var(--muted)); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; cursor: pointer; }
.portal .studio-perks button.underlink:hover { color: var(--ink); }
.holder-perks-tier { display: grid; gap: 6px; justify-items: start; }
.holder-perks-tier .holder-chip { justify-self: start; }
.holder-perks-tier strong { font-size: 16px; letter-spacing: -.01em; }
.holder-perks-tier small, .holder-perks-copy, .holder-perks-partners, .holder-perks-muted { color: var(--muted); font-size: 13px; line-height: 1.55; }
.holder-perks-copy { margin: 0; }
.holder-perks-copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.holder-perks-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.holder-perks-partners > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.holder-perks-row { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--studio-line-soft, var(--line)); }
.holder-perks-row small { color: var(--muted); font-size: 12px; line-height: 1.55; }
.holder-perks-beta .check { margin: 0; }
.holder-perks-merch label { display: grid; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.holder-perks-merch input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; background: var(--bg-deepest); color: var(--ink); font: inherit; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.holder-perks-merch .button { justify-self: start; min-height: 44px; }
.holder-perks-merch-status:empty, .holder-perks-status:empty { display: none; }
.holder-perks-merch-status, .holder-perks-status { margin: 0; color: var(--ink-secondary, var(--muted)); font-size: 13px; line-height: 1.5; }
.holder-perks-notice { margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; color: var(--ink-secondary, var(--muted)); font-size: 13px; line-height: 1.5; }
.holder-perks-notice .underlink { margin-left: 6px; }
.studio-hint { display: block; margin: -4px 0 8px 34px; color: var(--muted); font-size: 12px; line-height: 1.55; }
/* The badge toggle saves at once (its neighbours wait for SAVE): its own note sits right under it. */
.studio-inline-status { display: block; margin: -2px 0 8px 34px; color: var(--ink-secondary, var(--muted)); font-size: 12px; line-height: 1.55; }
.studio-inline-status:empty { display: none; }
@media (max-width: 750px) {
  .studio-perks { padding: 16px; }
  .holder-perks-merch .button { justify-self: stretch; }
  .studio-hint, .studio-inline-status { margin-left: 0; }
}