/* =========================================================================
   Monarch NFT card - ONE stylesheet for every .nft card on the site
   (landing For Sale grid, collection items, My NFTs). The markup comes from
   js/card.js (MonarchCard.render). Pages link this BEFORE their own <style>
   so a genuinely page-specific rule (sweep bar, .go link) can still win.
   item.html links it too, for the rarity tier tokens its rank card colours
   with (and only those - its rank card is not a grid card).
   ========================================================================= */

/* rarity tiers by percentile (ARC.rarityTier): legendary keeps the site gold */
:root{
  --tier-legendary:var(--gold,#ffc164); --tier-epic:#c084fc; --tier-rare:#5aa9ff;
  --tier-uncommon:#3ddc97; --tier-common:var(--mute,#69808d);
}

.nft{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.nft:hover{transform:translateY(-2px);border-color:#2a3c48;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.nft a:hover{text-decoration:none}
.nft a:hover .nm{color:var(--teal)}
.nft .art{color:inherit;display:block}
.nft img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface-2);display:block}
.nft img.px{image-rendering:pixelated}
.nft .ph{aspect-ratio:1;background:var(--surface-2)}
.nft .body{padding:11px 13px;display:flex;flex-direction:column;gap:7px}

/* collection-name line, with the venue marker right-justified: ⛵ for
   Seaport listings, "native" (uppercased) in purple for Monarch's own */
.nft .cl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nft .cl{font-size:.7rem;color:var(--mute)}
.nft .venue{flex:none;font-size:13px;line-height:1;cursor:default}
.nft .venue.native{font:700 10px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#c084fc}

.nft .nml{color:inherit}
.nft .nm{font-weight:700;font-size:.93rem}

/* price line / status line, the rank badge right-justified in either */
.nft .pr{font-size:.86rem;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:space-between;gap:8px}
.nft .st{font-size:.8rem;color:var(--mute);display:flex;align-items:center;justify-content:space-between;gap:8px}
.nft .st b{color:var(--pos)}
.nft .prr{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto}
/* secondary mono line (landing: "seller 0x…") */
.nft .who{font-size:.7rem;color:var(--mute);font-family:"IBM Plex Mono",monospace}

/* rarity badge: the price size (.86rem, 700 mono, gold) EVERYWHERE; the
   tier class (ARC.rarityTier) overrides the colour */
.nft .rr{font:700 .86rem "IBM Plex Mono",monospace;color:var(--gold);flex:none}
.rr.t-legendary{color:var(--tier-legendary)}
.rr.t-epic{color:var(--tier-epic)}
.rr.t-rare{color:var(--tier-rare)}
.rr.t-uncommon{color:var(--tier-uncommon)}
.rr.t-common{color:var(--tier-common)}

/* actions */
.nft .buyb,.nft .unlb,.nft .listb{border:none;cursor:pointer;border-radius:9px;padding:9px;font:700 13px "Inter",sans-serif}
.nft .buyb{background:var(--grad);color:#03211c}
.nft .listb{background:var(--surface-2);border:1px solid var(--teal);color:var(--text)}
.nft .unlb{background:none;border:1px solid var(--border);color:var(--dim)}
.nft input{background:var(--surface-2);border:1.5px solid var(--border);border-radius:9px;padding:8px 10px;color:var(--text);font:inherit;width:100%;outline:none}
.nft input:focus{border-color:var(--teal)}

/* sweep checkbox (collection page) */
.nft .selbox{position:absolute;top:8px;right:8px;z-index:3;width:24px;height:24px;border-radius:6px;border:1.5px solid var(--border);background:rgba(5,8,12,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent;font-weight:800;font-size:14px}
.nft .selbox.on{background:var(--teal);border-color:var(--teal);color:#03211c}
.nft.sel-on{border-color:var(--teal)}

/* My NFTs curation: ★ overlay (top right of the image) toggles favorite;
   the bottom row holds the item link on the left and the red ✕ (hide) on
   the right */
.nft .curate{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:5px}
.nft .curate button{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:rgba(5,8,12,.75);color:var(--dim);cursor:pointer;font-size:13px;line-height:1;padding:0}
.nft .curate button.on{color:var(--gold);border-color:rgba(255,193,100,.5)}
.nft .acts{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nft .hideb{border:1px solid rgba(255,107,129,.45);background:none;color:var(--neg);border-radius:6px;width:22px;height:22px;padding:0;font-size:12px;font-weight:800;line-height:1;cursor:pointer;flex:none}
.nft .hideb:hover{background:rgba(255,107,129,.12)}
.nft .hideb.undo{width:auto;padding:0 8px;font:600 11px "Inter",sans-serif;color:var(--teal);border-color:rgba(0,230,195,.45)}