/**
 * The star button on a card tile, shared by /auctions and /marketplace.
 *
 * The two do DIFFERENT things -- the auction board follows a lot ("Watch"),
 * the marketplace adds to your wantlist ("Want") -- so the labels differ on
 * purpose. Only the look is shared, and it lives here rather than in each
 * template because a per-page copy is how the sport chips ended up with four
 * drifting versions.
 *
 * Solid, not translucent: these sit over slab art of every colour, and a
 * see-through chip reads as part of the card instead of a control.
 */

.watchbtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid #45454f;
    border-radius: 999px;
    background: #14141a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    color: #f3f3f6;
    /* Longhand, not the `font:` shorthand: `font: 700 13px/1 inherit` is
       invalid (inherit is not a legal family there) so the browser dropped the
       whole declaration and the label rendered at weight 400. */
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.watchbtn .wlab {
    letter-spacing: .2px;
}

.watchbtn:hover {
    background: #1e1e26;
    border-color: #e8b64c;
    color: #e8b64c;
}

.watchbtn.on {
    background: #e8b64c;
    border-color: #e8b64c;
    /* Dark text ON the gold fill. Gold-on-gold made the My-bids chip
       completely invisible once already. */
    color: #17140a;
}

.watchbtn.on:hover {
    background: #f0c468;
    color: #17140a;
}

.watchbtn .wn {
    font-size: 11px;
    font-weight: 800;
    opacity: .85;
}

.watchbtn[disabled] {
    opacity: .55;
    cursor: default;
}

/* Narrow tiles: keep the star, drop the word rather than wrap it. */
@media (max-width: 420px) {
    .watchbtn .wlab {
        display: none;
    }

    .watchbtn {
        padding: 0 9px;
    }
}