/* VIP Owl Mask claim (SERVER-DONE.md §8): the Profile / Inventory panel and the public lookup page (/vip/).
   Black, white and grey; the rarity tone appears only on the mask's art frame (the tier it is). */
.vip-claims { display: grid; gap: 14px; }
.vip-claims[hidden] { display: none; }
.inv-vip { margin: 22px 0; padding: 20px; }
.vip-copy { margin: 0; color: var(--ink-secondary, var(--muted)); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.vip-copy a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.vip-copy strong { color: var(--ink); }
.vip-read-down { padding: 12px 14px; border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; color: var(--ink); }
.vip-head-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.portal .vip-claims 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-underline-offset: 3px; cursor: pointer; }
.portal .vip-claims button.underlink:hover { color: var(--ink); }
.portal .vip-claims button.underlink:disabled { opacity: .5; cursor: wait; }
.vip-subheading { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vip-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vip-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated, rgba(255, 255, 255, .03)); }
.vip-row[aria-current="true"] { border-color: var(--line-strong, var(--ink)); }
.vip-row > div { display: grid; gap: 4px; min-width: 0; }
.vip-row strong { font-size: 14px; }
.vip-row span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.vip-row[data-state="claimed"] > div span, .vip-row[data-state="claimed_pending"] > div span { color: var(--ink-secondary, var(--muted)); }
.vip-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vip-row-actions .button { min-height: 44px; }
.vip-row-actions:empty { display: none; }
.vip-status:empty, .vip-step-status:empty { display: none; }
.vip-row-error { margin: 2px 0 0; color: var(--ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.vip-blocked { display: grid; gap: 10px; justify-items: start; margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; color: var(--ink); font-size: 13px; line-height: 1.55; }
.vip-blocked p { margin: 0; }
.vip-blocked .button { min-height: 44px; }
.vip-status, .vip-step-status { margin: 0; color: var(--ink-secondary, var(--muted)); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

/* The open claim: the same card as /redeem/ (mask art, Free / fee / total, two wallet steps). */
.vip-claim { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; padding: 20px; border: 1px solid var(--line-strong, var(--line)); border-radius: 18px; background: var(--bg-elevated, rgba(255, 255, 255, .03)); --tone: var(--rarity-common); }
.vip-claim[data-tone="uncommon"] { --tone: var(--rarity-uncommon); }
.vip-claim[data-tone="rare"] { --tone: var(--rarity-rare); }
.vip-claim[data-tone="very-rare"] { --tone: var(--rarity-very-rare); }
.vip-claim[data-tone="epic"] { --tone: var(--rarity-epic); }
.vip-claim[data-tone="legendary"] { --tone: var(--rarity-legendary); }
.vip-claim[data-tone="mythic"] { --tone: var(--rarity-mythic); }
.vip-claim[data-tone="super-rare"] { --tone: var(--rarity-super-rare); }
.vip-claim-art { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tone) 45%, var(--line)); background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tone) 28%, var(--bg-elevated, #1a1b1d)), var(--bg-deepest, #0a0a0b) 75%); }
.vip-claim-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vip-claim-art .checkout-art-placeholder { color: var(--muted); font-weight: 800; letter-spacing: .2em; }
.vip-claim-copy { display: grid; gap: 14px; align-content: start; min-width: 0; }
.vip-claim-copy .eyebrow { margin: 0; }
.vip-claim-copy h3 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.08; letter-spacing: -.035em; }
.vip-meta { margin: 0; color: color-mix(in srgb, var(--tone) 70%, #fff); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vip-breakdown { display: grid; gap: 8px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vip-breakdown div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-secondary, var(--muted)); }
.vip-breakdown dt, .vip-breakdown dd { margin: 0; }
.vip-breakdown .vip-total { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 600; }
.vip-mismatch, .vip-refund { margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; color: var(--ink); font-size: 13px; line-height: 1.55; }
.vip-refund p { margin: 0 0 8px; }
.vip-refund p:last-child { margin: 0; }
.vip-reference code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.vip-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vip-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.vip-step-no { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vip-step .button { justify-self: start; min-height: 44px; }
.vip-step small { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 1.55; }
.vip-step[data-done="true"] .vip-step-no { color: var(--ink); }
.vip-request { display: grid; gap: 12px; justify-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-base, #0b0b0c); text-align: center; }
.vip-request .checkout-qr-frame { width: 216px; height: 216px; max-width: 100%; padding: 8px; background: #fff; border-radius: 16px; }
.vip-request #vip-qr { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.vip-request .checkout-scan-label { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.vip-fees { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.vip-done { display: grid; gap: 12px; }
.vip-done h3 { margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.02; letter-spacing: -.05em; }
.vip-done p { margin: 0; color: var(--ink-secondary, var(--muted)); font-size: 14px; line-height: 1.6; }
.vip-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vip-token dd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.vip-back { justify-self: start; min-height: 44px; }

/* The public lookup page. */
.portal[data-page="vip"] .portal-main { max-width: 1240px; }
.vip-hero { display: grid; gap: 14px; margin: 8px 0 24px; }
.vip-hero .eyebrow { margin: 0; }
.vip-hero h1 { margin: 0; font-size: clamp(34px, 7vw, 60px); line-height: .95; font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; }
.vip-lede { margin: 0; max-width: 62ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.vip-lookup-app { display: grid; gap: 22px; }
.vip-lookup-app + .vip-copy { margin-top: 20px; }
.vip-lookup-form { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg-elevated); }
.vip-lookup-form label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vip-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.vip-lookup-form input { min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-deepest); color: var(--ink); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.vip-lookup-form input:focus-visible { outline: 2px solid var(--accent-bright, #fff); outline-offset: 3px; }
.vip-lookup-form .button { min-height: 48px; white-space: nowrap; }
.vip-lookup-form .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.vip-lookup-answer:empty { display: none; }
.vip-lookup-form small { color: var(--muted); font-size: 12px; line-height: 1.55; }
.vip-lookup-result { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line-strong); border-left: 4px solid var(--ink); border-radius: 16px; background: var(--bg-elevated); }
.vip-lookup-result .eyebrow { margin: 0; }
.vip-lookup-result h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
.vip-lookup-result p { margin: 0; color: var(--ink-secondary, var(--muted)); font-size: 14px; line-height: 1.6; }
.vip-lookup-state strong { color: var(--ink); font-size: 16px; }
.vip-lookup-result[data-state="claimed"] { border-left-color: var(--muted); }
.vip-lookup-id code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; user-select: all; }

@media (max-width: 750px) {
  .vip-claim { grid-template-columns: 1fr; padding: 16px; }
  .vip-claim-art { max-width: 240px; }
  .vip-step { grid-template-columns: 1fr; }
  .vip-step small { grid-column: 1; }
  .vip-step .button, .vip-row-actions .button { width: 100%; justify-content: center; }
  .vip-lookup-row { grid-template-columns: 1fr; }
  .inv-vip { padding: 16px; }
}
/* The Profile shows the panel in the studio's narrow side column: the card stacks there whatever the window width. */
.vip-claims { container-type: inline-size; }
@container (max-width: 560px) {
  .vip-claim { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .vip-claim-art { max-width: 220px; }
  .vip-step { grid-template-columns: 1fr; }
  .vip-step small { grid-column: 1; }
  .vip-step .button, .vip-row-actions, .vip-row-actions .button { width: 100%; justify-content: center; }
  .vip-claim-copy h3 { font-size: 24px; }
}