/* Reels action rail, second pass (owner brief 2026-11-01 15:17): the whole column comes
   down and each row tightens, and the follow door is a wordless badge on the avatar's own
   edge instead of a "Following" pill.

   The rail used to bottom out 159px up the screen, which left a gap of dead video under
   the ⋯ and pushed the creator's picture up beside the clip's face. It now foots at the
   same line the caption block starts from, so the two columns read as one band.

   Phone only: the desktop rail has room and shares its column with the scroll arrows.
   Fresh filename: hCDN caches css/* for a week and ignores query strings. */

@media (max-width: 820px) {
    .mtv-reel__rail {
        right: 8px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        gap: 9px;
    }

    .mtv-reel__act {
        gap: 3px;
    }

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

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

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

    .mtv-reel__author-avatar {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
    }

    .mtv-reel__author-initials {
        font: 800 13px/1 var(--mtv-font-ui, system-ui);
    }

    /* A 24px dot is not a thumb target, so the hit box reaches 44px wide while the paint
       stays small. It must not reach up into the avatar: the badge sits at the avatar's
       lower edge, and the first pass expanded its hit box over the avatar's own centre,
       which stole the profile link. */
    .mtv-reel__follow {
        position: relative;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        margin-top: -10px;
        padding: 0;
        box-shadow: 0 0 0 2px rgba(8, 27, 44, .55);
    }

    .mtv-reel__follow::after {
        content: '';
        position: absolute;
        inset: -2px -10px -10px;
    }

    .mtv-reel__follow.is-on {
        background: rgba(8, 27, 44, .8);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 2px rgba(8, 27, 44, .55);
    }

    .mtv-reel__follow-glyph {
        display: grid;
        place-items: center;
    }

    .mtv-reel__follow-glyph svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}