/* ==========================================================================
   SocialHub — Reels watch feed (Shorts-style vertical scroller)

   One reel fills the screen and the track snaps to the next. Mobile-first:
   the phone layout is the unprefixed one, and the only thing that changes
   on a wider screen is how much chrome has to be subtracted from the
   viewport height.
   ========================================================================== */

.sh-rw {
    /* Everything above and below the track that the feed has to clear:
       the fixed header, the phone tab bar, and the shell's own padding.
       One knob, so a layout change is corrected in a single place. */
    --sh-rw-inset: calc(var(--sh-header-h) + var(--sh-tabbar-h) + var(--sh-sp-10));
    --sh-rw-ratio: 9 / 16;
    --sh-rw-rail-w: 56px;
    --sh-rw-chip-size: 34px;

    /* Exactly the two chrome chips plus their gap and offset. The top
       overlay reserves this so the author's name can never run under
       them; because the chips are icon-only it does not move with the
       label text or the language. */
    --sh-rw-chrome-w: calc((var(--sh-rw-chip-size) * 2) + var(--sh-sp-2) + var(--sh-sp-4));

    /* A reel is as tall as the space it is given, and as wide as that
       height allows. Capping the height alone would leave the box wider
       than 9:16 and `contain` would pillarbox a vertical video inside it. */
    --sh-rw-height: calc(100dvh - var(--sh-rw-inset));
    --sh-rw-width: calc(var(--sh-rw-height) * var(--sh-rw-ratio));

    position: relative;
    /* Edge to edge on a phone: the shell's gutter would otherwise pinch
       the panel narrower than 9:16, which bars the video top and bottom
       on the one screen where a reel should fill everything. */
    margin-inline: calc(var(--sh-gutter) * -1);
}

/* Hugs the reel, so the feed is the video and not a dark slab the width
   of the column. */
.sh-rw-viewport {
    position: relative;
    max-width: var(--sh-rw-width);
    margin-inline: auto;
}

/* -- The scroller --------------------------------------------------------- */

.sh-rw-track {
    height: var(--sh-rw-height);
    overflow-y: auto;
    /* `mandatory` is what makes it land on a reel instead of between two. */
    scroll-snap-type: y mandatory;
    /* Stop a flick at either end from scrolling the page behind it. */
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    background: var(--sh-media-backdrop);
}

.sh-rw-track::-webkit-scrollbar {
    display: none;
}

.sh-rw-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    scroll-snap-align: center;
    /* Without this a fast flick skates past several reels at once. */
    scroll-snap-stop: always;
}

/* -- The video ------------------------------------------------------------ */

/* The stage takes its width from the height, the same way the single reel
   page does — capping the height alone leaves the box wider than 9:16 and
   `contain` then pillarboxes a perfectly vertical video inside it. */
/* `width: min(…)` plus `aspect-ratio` is what keeps the box at 9:16 under
   *both* limits. Setting `height: 100%` and capping the width instead
   breaks the ratio the moment the panel is the narrower constraint — the
   box goes wider or taller than 9:16 and `contain` bars the video again. */
.sh-rw-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, var(--sh-rw-width));
    aspect-ratio: var(--sh-rw-ratio);
    max-height: 100%;
    overflow: hidden;
    background: var(--sh-media-backdrop);
}

.sh-rw-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--sh-media-backdrop);
}

/* The whole frame toggles playback. It sits under the overlays so a tap on
   a link or a rail button still reaches it. */
.sh-rw-surface {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--sh-white);
}

.sh-rw-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--sh-radius-full);
    background: rgb(0 0 0 / 45%);
    opacity: 0;
    transition: opacity var(--sh-transition, 150ms) ease;
}

.sh-rw-cue svg {
    width: 28px;
    height: 28px;
}

/* Only shown while the reel is stopped — a permanent play badge over a
   playing video reads as a broken player. */
.sh-rw-panel.is-paused .sh-rw-cue {
    opacity: 1;
}

/* -- Progress -------------------------------------------------------------- */

/* A <progress>, so the value is an attribute and every pixel of the bar is
   painted from this stylesheet. A div whose width JavaScript writes would
   be an inline style by another name. */
.sh-rw-progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    appearance: none;
    width: 100%;
    height: 3px;
    border: 0;
    background: rgb(255 255 255 / 25%);
    color: var(--sh-primary-500);
}

.sh-rw-progress::-webkit-progress-bar {
    background: rgb(255 255 255 / 25%);
}

.sh-rw-progress::-webkit-progress-value {
    background: var(--sh-primary-500);
}

.sh-rw-progress::-moz-progress-bar {
    background: var(--sh-primary-500);
}

/* -- Overlays -------------------------------------------------------------- */

/* Fixed colours, like `--sh-white`: these sit on video frames, so no theme
   may repaint them. The scrims reach the edges of the frame — insetting the
   element instead leaves its gradient box visible as a hard-edged block. */
.sh-rw-overlay {
    position: absolute;
    inset-inline: 0;
    z-index: 3;
    padding: var(--sh-sp-3);
    color: var(--sh-white);
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
    pointer-events: none;
}

.sh-rw-overlay a {
    color: inherit;
    pointer-events: auto;
}

.sh-rw-overlay-top {
    inset-block-start: 0;
    padding-inline-end: var(--sh-rw-chrome-w);
    background: linear-gradient(to bottom, rgb(0 0 0 / 55%), transparent);
}

.sh-rw-overlay-foot {
    inset-block-end: 0;
    /* Clear of the progress bar below and the action rail beside it. */
    padding-block-end: var(--sh-sp-4);
    padding-inline-end: var(--sh-rw-rail-w);
    background: linear-gradient(to top, rgb(0 0 0 / 60%), rgb(0 0 0 / 30%) 45%, transparent);
}

.sh-rw-who {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-sp-2);
    text-decoration: none;
}

.sh-rw-who-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sh-rw-who-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
    /* A long name shortens rather than wrapping the meta line under it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-rw-who-name svg {
    width: 13px;
    height: 13px;
}

.sh-rw-who-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sh-fs-xs);
    opacity: 0.85;
}

.sh-rw-who-meta svg {
    width: 12px;
    height: 12px;
}

.sh-rw-caption {
    margin: 0;
    font-size: var(--sh-fs-sm);
}

.sh-rw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-sp-2);
    margin: var(--sh-sp-1) 0 0;
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
}

.sh-rw-audio {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--sh-sp-2) 0 0;
    font-size: var(--sh-fs-xs);
    min-width: 0;
}

.sh-rw-audio svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

.sh-rw-audio-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- Action rail ----------------------------------------------------------- */

.sh-rw-rail {
    position: absolute;
    inset-inline-end: var(--sh-sp-2);
    inset-block-end: var(--sh-sp-6);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sh-sp-3);
}

.sh-rw-act-form {
    margin: 0;
}

.sh-rw-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sh-white);
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

.sh-rw-act svg {
    width: 26px;
    height: 26px;
}

.sh-rw-act-label {
    font-size: var(--sh-fs-xs);
    font-weight: var(--sh-fw-semibold);
}

/* `currentColor` on the glyph is what fills the heart and the bookmark. */
.sh-rw-act.is-on {
    color: var(--sh-danger-400, var(--sh-danger-500));
}

.sh-rw-act.is-on svg {
    fill: currentColor;
}

.sh-rw-act[data-sh-reel-save].is-on {
    color: var(--sh-warning-400, var(--sh-warning-500));
}

/* -- Chrome: sound, browse, step buttons ----------------------------------- */

.sh-rw-chrome {
    position: absolute;
    inset-block-start: var(--sh-sp-3);
    inset-inline-end: var(--sh-sp-3);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sh-sp-2);
}

.sh-rw-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sh-rw-chip-size);
    height: var(--sh-rw-chip-size);
    padding: 0;
    border: 0;
    border-radius: var(--sh-radius-full);
    background: rgb(0 0 0 / 55%);
    color: var(--sh-white);
    text-decoration: none;
    cursor: pointer;
}

.sh-rw-chip:hover {
    background: rgb(0 0 0 / 75%);
}

.sh-rw-chip svg {
    width: 16px;
    height: 16px;
}

/* One glyph is shown per state, chosen by a class rather than by script. */
.sh-rw-chip .sh-rw-when-loud,
.sh-rw-chip.is-on .sh-rw-when-muted {
    display: none;
}

.sh-rw-chip.is-on .sh-rw-when-loud {
    display: inline-flex;
}

/* Keyboard and mouse need a way to move between reels; a trackpad and a
   thumb already have one. */
.sh-rw-steps {
    display: none;
}

/* -- Wider screens --------------------------------------------------------- */

@media (min-width: 768px) {
    .sh-rw {
        /* No bottom tab bar from here up. */
        --sh-rw-inset: calc(var(--sh-header-h) + var(--sh-sp-10));
        /* The column is wide enough now; sit inside the shell like every
           other page and let the corners round. */
        margin-inline: 0;
    }

    .sh-rw-track {
        border-radius: var(--sh-radius);
    }

    /* Beside the reel and vertically centred, in the space the narrowed
       viewport leaves — over the frame they would fight the action rail. */
    .sh-rw-steps {
        position: absolute;
        inset-inline-end: var(--sh-sp-4);
        inset-block-start: 50%;
        translate: 0 -50%;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: var(--sh-sp-2);
    }

    .sh-rw-step {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--sh-border);
        border-radius: var(--sh-radius-full);
        background: var(--sh-surface);
        color: var(--sh-text);
        cursor: pointer;
    }

    .sh-rw-step:hover {
        background: var(--sh-surface-sunken);
    }

    .sh-rw-step svg {
        width: 18px;
        height: 18px;
    }

    .sh-rw-step[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

/* A reel is a tall thing; give it the room once the window is tall enough
   to matter, rather than letting the shell's padding eat into it. */
@media (min-width: 1024px) {
    .sh-rw {
        --sh-rw-inset: calc(var(--sh-header-h) + var(--sh-sp-8));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-rw-track {
        scroll-behavior: auto;
    }

    .sh-rw-cue {
        transition: none;
    }
}

/* ==========================================================================
   Sponsored panels
   A paid slot in the scroller, bought on Admin → Ads & Promotions against
   the `reels_infeed` placement. It is a panel like any other so snapping,
   autoplay handover and endless loading treat it identically — what marks
   it out is the label, which is never optional.
   ========================================================================== */

/* A still creative fills the frame the same way a video does, and is
   never cropped — so a blurred copy sits behind it to fill a landscape
   creative's letterbox instead of leaving two slabs of backdrop. */
.sh-rw-adimage {
    position: relative;
    z-index: 1;
    object-fit: contain;
    /* `.sh-rw-video` paints an opaque backdrop, which would hide the
       blurred copy behind this one. */
    background: transparent;
}

.sh-rw-adbackdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(28px) brightness(0.55);
    /* Scaled up so the blur's soft edges never show at the frame border. */
    scale: 1.2;
}

.sh-rw-sponsored {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--sh-sp-2);
    border-radius: var(--sh-radius-full);
    background: rgb(0 0 0 / 55%);
    color: var(--sh-white);
    font-size: var(--sh-fs-2xs);
    font-weight: var(--sh-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sh-rw-sponsored svg {
    width: 13px;
    height: 13px;
}

/* No action rail on an ad, so the foot uses the whole width. */
.sh-rw-panel-ad .sh-rw-overlay-foot {
    padding-inline-end: var(--sh-sp-3);
}

.sh-rw-adname {
    margin: 0 0 2px;
    font-size: var(--sh-fs-md);
    font-weight: var(--sh-fw-bold);
}

.sh-rw-adfoot .sh-btn {
    /* Clear of the progress bar, and its own colour comes from the
       advertiser's `sh-ac-cta-*` class. */
    margin-top: var(--sh-sp-3);
    pointer-events: auto;
}