/* ==========================================================================
   Single reel

   Mobile-first: the video, then the details sheet, then the rails. From
   1024px the details sit beside the video; from 1280px the rails join.
   Every value is a token.
   ========================================================================== */

.sh-rs {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: var(--sh-sp-4) var(--sh-sp-4) var(--sh-sp-8);
}

.sh-rs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sh-sp-4);
    align-items: start;
}

.sh-rs-details,
.sh-rs-rail {
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-4);
    min-width: 0;
}

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

/* Cap the stage's WIDTH, never the video's height.
 *
 * `max-height` on a box that also has `width: 100%` and an `aspect-ratio`
 * does not keep the ratio — the height clamps and the width stays, so the
 * box grows wider than 9:16 and `object-fit: contain` pillarboxes a
 * perfectly vertical video inside it. A 720x1280 reel showed 55px of
 * backdrop down each side at 1280x800. Deriving the width from the same
 * height cap keeps the box at the ratio, so the video fills it exactly.
 *
 * A reel that genuinely is not 9:16 still letterboxes rather than being
 * cropped — losing the edges of somebody's video is worse than a border. */
.sh-rs-stage {
    --sh-rs-ratio: 9 / 16;
    --sh-rs-max-height: 78vh;
    /* The browser draws its own transport along the bottom of the video.
       Everything overlaid has to clear it, or the caption and the action
       rail sit on top of the scrubber. */
    --sh-rs-transport: var(--sh-sp-12);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: calc(var(--sh-rs-max-height) * var(--sh-rs-ratio));
    margin-inline: auto;
    border-radius: var(--sh-radius);
    background: var(--sh-media-backdrop);
    overflow: hidden;
}

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

/* The overlays sit on the video, so their colour is fixed in both themes
   and they must not swallow clicks meant for the player's own controls. */
.sh-rs-overlay {
    position: absolute;
    inset-inline: 0;
    padding: var(--sh-sp-3);
    color: var(--sh-white);
    /* A bright frame would otherwise swallow white text. */
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
    pointer-events: none;
}

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

.sh-rs-overlay-top {
    inset-block-start: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 55%), transparent);
}

/* The scrim runs to the edges of the frame; only the text is inset.
 *
 * Holding the element itself off the bottom and 72px off the side made its
 * gradient box visible as a hard-edged black rectangle sitting up the
 * middle of the video — a fade only hides its own edge where it reaches
 * zero, and this one was cut off at 55% on two sides. Padding moves the
 * caption clear of the player's transport and the action rail without
 * moving the fade. */
.sh-rs-overlay-foot {
    inset-block-end: 0;
    padding-block-end: calc(var(--sh-rs-transport) + var(--sh-sp-2));
    padding-inline-end: 72px;
    background: linear-gradient(to top, rgb(0 0 0 / 60%), rgb(0 0 0 / 30%) 45%, transparent);
}

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

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

.sh-rs-who-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
}

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

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

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

.sh-rs-rail-actions {
    position: absolute;
    /* Above the transport and the caption both. */
    inset-block-end: calc(var(--sh-rs-transport) + var(--sh-sp-10));
    inset-inline-end: var(--sh-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-4);
    color: var(--sh-white);
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
    pointer-events: none;
}

.sh-rs-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sh-rs-act svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 60%));
}

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

.sh-rs-overlay-caption {
    margin: 0;
    font-size: var(--sh-fs-sm);
    overflow-wrap: anywhere;
}

.sh-rs-overlay-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-size: var(--sh-fs-xs);
}

.sh-rs-overlay-tags a {
    text-decoration: none;
}

/* -- Details ------------------------------------------------------------- */

.sh-rs-author {
    display: flex;
    align-items: center;
    gap: var(--sh-sp-3);
    margin-bottom: var(--sh-sp-3);
}

.sh-rs-author-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

.sh-rs-author-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--sh-fw-semibold);
    color: var(--sh-text-strong);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sh-rs-author-name svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.sh-rs-author-handle {
    font-size: var(--sh-fs-sm);
    color: var(--sh-text-muted);
}

.sh-rs-caption {
    margin: 0 0 var(--sh-sp-2);
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

.sh-rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-sp-2);
    margin: 0 0 var(--sh-sp-3);
    font-size: var(--sh-fs-sm);
}

.sh-rs-tags a {
    color: var(--sh-primary-600);
    text-decoration: none;
}

.sh-rs-audio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-sp-3);
    padding: var(--sh-sp-2) var(--sh-sp-3);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-surface-sunken);
}

/* The basis is what sends Use Audio to its own line rather than letting it
   squeeze the track down to "Original …" in the narrow details column. */
.sh-rs-audio-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 150px;
    min-width: 0;
}

/* Truncate the track, never break it up.
 *
 * `overflow-wrap: anywhere` let "Original Audio · Sunil Kumar" break
 * mid-word, and it also drops the element's min-content width to a single
 * character — so the flex row handed the title almost nothing and it came
 * out one or two words per line beside the Use Audio button. */
.sh-rs-audio-title {
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
    color: var(--sh-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-rs-audio-count {
    font-size: var(--sh-fs-xs);
    color: var(--sh-text-muted);
}

.sh-rs-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sh-sp-3);
    margin-top: var(--sh-sp-3);
    padding-top: var(--sh-sp-3);
    border-top: 1px solid var(--sh-border);
}

.sh-rs-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
    color: var(--sh-text-muted);
}

.sh-rs-action svg {
    width: 19px;
    height: 19px;
}

/* -- Comments ------------------------------------------------------------ */

.sh-rs-comments-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-sp-2);
    margin-bottom: var(--sh-sp-3);
}

.sh-rs-composer {
    display: flex;
    align-items: center;
    gap: var(--sh-sp-2);
    margin-bottom: var(--sh-sp-3);
}

.sh-rs-composer .sh-input {
    flex: 1 1 0;
    min-width: 0;
}

.sh-rs-composer .sh-avatar {
    display: inline-flex;
    flex: 0 0 auto;
}

.sh-rs-comments {
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-3);
}

.sh-rs-closed {
    display: flex;
    align-items: center;
    gap: var(--sh-sp-2);
    margin: 0;
    font-size: var(--sh-fs-sm);
    color: var(--sh-text-muted);
}

.sh-rs-closed svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.sh-rs-more {
    display: block;
    margin-top: var(--sh-sp-3);
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
    color: var(--sh-primary-600);
    text-align: center;
    text-decoration: none;
}

/* -- Rails --------------------------------------------------------------- */

.sh-rs-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sh-sp-2);
    margin-bottom: var(--sh-sp-3);
}

.sh-rs-seeall {
    flex: 0 0 auto;
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
    color: var(--sh-primary-600);
    text-decoration: none;
}

.sh-rs-rail-list {
    display: flex;
    flex-direction: column;
    gap: var(--sh-sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-rs-rail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-sp-3);
    text-decoration: none;
}

.sh-rs-rail-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    aspect-ratio: 3 / 4;
    border-radius: var(--sh-radius-sm);
    overflow: hidden;
    background: var(--sh-surface-sunken);
}

.sh-rs-rail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-rs-rail-time {
    position: absolute;
    inset-block-end: 3px;
    inset-inline-start: 3px;
    padding: 1px 4px;
    border-radius: var(--sh-radius-xs);
    /* On the thumbnail in both themes, so both colours are fixed. */
    background: rgb(0 0 0 / 65%);
    color: var(--sh-white);
    font-size: 10px;
}

.sh-rs-rail-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
}

.sh-rs-rail-title {
    font-size: var(--sh-fs-sm);
    font-weight: var(--sh-fw-semibold);
    color: var(--sh-text-strong);
    overflow-wrap: anywhere;
}

.sh-rs-rail-views {
    font-size: var(--sh-fs-xs);
    color: var(--sh-text-muted);
}

@media (min-width: 1024px) {
    .sh-rs-layout {
        grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    }
}

/* Related Reels only joins the row once the middle column can still hold a
 * line of text. At 1280 the three tracks came to 460 + 1fr + 300 inside a
 * 932px area, which left the details column 140px and broke the author's
 * name one letter per line. */
@media (min-width: 1440px) {
    .sh-rs-layout {
        grid-template-columns: minmax(0, 460px) minmax(0, 1fr) 300px;
    }

    .sh-rs-rail {
        position: sticky;
        top: var(--sh-sp-4);
    }
}