/* Reels rail, X pass (owner brief 2026-11-01 20:00: the feed card and the reel player
   should read as the same product).

   The order itself is drawn by reels-v14.js — comment, repost, like, views, save, share,
   then the ⋯ — so this file only has to make each door behave like X's: a deep round well
   that floods with its own action colour, a count that takes that colour too, and a press
   that visibly gives. Over a playing clip the base well stays dark because the video
   behind it can be anything.

   Views moved here from the caption column, so the caption is now only the creator's name
   and what they wrote.

   Fresh filename: hCDN caches css/* for a week and ignores query strings. */

.mtv-reel__rail {
    gap: 14px;
}

.mtv-reel__act {
    gap: 2px;
}

.mtv-reel__act .mtv-reel__icon {
    transition: background-color .16s ease, color .16s ease, transform .12s ease;
}

.mtv-reel__act .mtv-reel__count {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    transition: color .16s ease;
}

/* The well paints smaller than the thumb has to hit, so the row keeps 44px of reach
   without the column growing a second rail's worth of height. */
.mtv-reel__act--comment .mtv-reel__icon,
.mtv-reel__act--repost .mtv-reel__icon,
.mtv-reel__act--like .mtv-reel__icon,
.mtv-reel__act--views .mtv-reel__icon,
.mtv-reel__act--save .mtv-reel__icon,
.mtv-reel__act--share .mtv-reel__icon {
    color: #fff;
}

/* Each door floods with the colour the same action uses under a feed card. */
.mtv-reel__act--comment:hover .mtv-reel__icon,
.mtv-reel__act--comment:active .mtv-reel__icon,
.mtv-reel__act--like:hover .mtv-reel__icon,
.mtv-reel__act--like:active .mtv-reel__icon,
.mtv-reel__act--save:hover .mtv-reel__icon,
.mtv-reel__act--save:active .mtv-reel__icon {
    background: rgba(216, 30, 91, .34);
    color: #ff8fb8;
}

.mtv-reel__act--repost:hover .mtv-reel__icon,
.mtv-reel__act--repost:active .mtv-reel__icon {
    background: rgba(0, 128, 111, .38);
    color: #6fe3d3;
}

.mtv-reel__act--views:hover .mtv-reel__icon,
.mtv-reel__act--views:active .mtv-reel__icon,
.mtv-reel__act--share:hover .mtv-reel__icon,
.mtv-reel__act--share:active .mtv-reel__icon {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.mtv-reel__act--comment:hover .mtv-reel__count,
.mtv-reel__act--like:hover .mtv-reel__count,
.mtv-reel__act--save:hover .mtv-reel__count,
.mtv-reel__act--comment:active .mtv-reel__count,
.mtv-reel__act--like:active .mtv-reel__count,
.mtv-reel__act--save:active .mtv-reel__count {
    color: #ff8fb8;
}

.mtv-reel__act--repost:hover .mtv-reel__count,
.mtv-reel__act--repost:active .mtv-reel__count {
    color: #6fe3d3;
}

.mtv-reel__act--views:hover .mtv-reel__count,
.mtv-reel__act--share:hover .mtv-reel__count,
.mtv-reel__act--views:active .mtv-reel__count,
.mtv-reel__act--share:active .mtv-reel__count {
    color: #fff;
}

/* Held down: the well dips the way X's button does, so a tap reads as a press even when
   the action itself is a server round trip. */
.mtv-reel__act:active .mtv-reel__icon {
    transform: scale(.9);
}

@media (hover: none) {
    .mtv-reel__act:active .mtv-reel__icon {
        transform: scale(.92);
    }
}

/* Pressed-in states keep the flood, so a liked clip is still pink once the finger leaves. */
.mtv-reel__act--repost.is-on .mtv-reel__icon {
    background: #00806f;
    color: #fff;
}

.mtv-reel__act--repost.is-on .mtv-reel__count {
    color: #6fe3d3;
}

.mtv-reel__act--like.is-on .mtv-reel__icon,
.mtv-reel__act--save.is-on .mtv-reel__icon {
    background: var(--mtv-magenta, #d81e5b);
    color: #fff;
}

.mtv-reel__act--like.is-on .mtv-reel__count,
.mtv-reel__act--save.is-on .mtv-reel__count {
    color: #ff8fb8;
}

@media (prefers-reduced-motion: reduce) {
    .mtv-reel__act .mtv-reel__icon,
    .mtv-reel__act .mtv-reel__count {
        transition: none;
    }

    .mtv-reel__act:active .mtv-reel__icon {
        transform: none;
    }
}

/* Phone: the column has nine rows now, so each one gives up a little height and the
   counts stop borrowing space from the caption beside them. */
@media (max-width: 820px) {
    .mtv-reel__rail {
        gap: 7px;
    }

    .mtv-reel__act {
        min-height: 44px;
    }

    .mtv-reel__icon {
        width: 38px;
        height: 38px;
    }

    .mtv-reel__icon svg {
        width: 19px;
        height: 19px;
    }

    .mtv-reel__count {
        max-width: 46px;
        font-size: 10px;
    }
}