/* LUB Shakthi — reels. */

/* ─────────────────────────────────────────────── full-screen section
 *
 * Reels take the whole area between the header and the tab bar, with no
 * heading row of its own. The two heights below are the single source of
 * truth for that chrome — they are also what the header and tab bar are
 * built from, so the sum cannot drift out of step.
 */
.page-reels .mwrap { max-width: none; padding: 0; }
.page-reels { overflow: hidden; }

.reel-stageframe {
    position: relative;
    /* The 2px is the 1px border on each of the header and the tab bar, which
     * the height variables do not include. Without it the page gains a
     * two-pixel scrollbar that nothing can scroll to. */
    height: calc(100dvh - var(--mtop-h) - var(--mnav-h) - 2px);
    background: #06070A;
}

/* One reel per screen, snapping. The rail scrolls, not the page. */
.reel-rail {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background: #06070A;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.reel-rail::-webkit-scrollbar { display: none; }

/* Upload rides over the video rather than taking a row above it. */
.reel-upload {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(12,14,18,.58); color: #fff;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    transition: background .16s, transform .16s;
}
.reel-upload:hover { background: rgba(249,115,22,.9); transform: scale(1.06); }
.reel-upload .material-symbols-outlined { font-size: 22px; }

.reels-empty {
    text-align: center; padding: 60px 22px; color: var(--ink-2);
}
.reels-empty .material-symbols-outlined {
    font-size: 54px; color: var(--brand); display: block; margin-bottom: 10px;
}
.reels-empty h1 { font-size: 20px; margin: 0 0 6px; }
.reels-empty p { font-size: 13.5px; color: var(--ink-3); max-width: 330px; margin: 0 auto 18px; }

.reel {
    position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/* On a phone the video is the screen and the words sit over it. The player
   is therefore the whole reel; the desktop block further down takes it
   apart into a column with the actions beside it. */
.reel-player { position: absolute; inset: 0; }

.reel-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-video {
    width: 100%; height: 100%; object-fit: contain; background: #06070A; display: block;
}

/* Desktop only, hidden here. */
.reel-sound, .reel-nav { display: none; }

.reel-missing { color: rgba(255,255,255,.6); text-align: center; font-size: 13.5px; }
.reel-missing .material-symbols-outlined { font-size: 42px; display: block; margin-bottom: 8px; }

.reel-tap {
    position: absolute; inset: 0; border: 0; background: 0; cursor: pointer;
    display: grid; place-items: center;
}
.reel-play {
    font-size: 64px; color: rgba(255,255,255,.9); opacity: 0;
    transition: opacity .18s; text-shadow: 0 2px 14px rgba(0,0,0,.5);
    font-variation-settings: "FILL" 1;
}

.reel-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,.18);
}
.reel-progress span {
    display: block; height: 100%; width: 0;
    background: var(--brand); transition: width .2s linear;
}

/* ─────────────────────────────────────────────── overlay */

/* A scrim, so white text stays readable over a bright video.
 *
 * It runs the full width of the frame: stopping it short of the action rail
 * left a hard vertical edge down the right-hand side. The text inside is what
 * keeps clear of the buttons, not the gradient. */
.reel-meta {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 56px 0 20px; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.78) 62%);
    pointer-events: none;
}
.reel-meta-in { padding: 0 72px 0 16px; }
.reel-meta a, .reel-meta .chip { pointer-events: auto; }

.reel-author { display: flex; align-items: center; gap: 9px; color: #fff; }
.reel-author .n { display: block; font-size: 14px; font-weight: 700; }
.reel-author .d { display: block; font-size: 11.5px; opacity: .8; }

.reel-body {
    margin: 9px 0 0; font-size: 13.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.reel-tags .chip {
    background: rgba(255,255,255,.17); color: #fff; border: 0;
    display: inline-flex; align-items: center; gap: 4px;
}
.reel-tags .chip .material-symbols-outlined { font-size: 13px; }
.reel-tags .why:hover { background: rgba(255,255,255,.3); }

/* ─────────────────────────────────────────────── action rail */

.reel-acts {
    position: absolute; right: 10px; bottom: 22px; z-index: 3;
    display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.reel-acts form { margin: 0; }
.reel-act {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 0; background: 0; cursor: pointer; color: #fff; font-family: inherit;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.reel-act .material-symbols-outlined { font-size: 29px; transition: transform .18s; }
.reel-act:hover .material-symbols-outlined { transform: scale(1.14); }
.reel-act .c { font-size: 11.5px; font-weight: 700; }
.reel-act.is-on { color: #FB7185; }

.reel-drawer {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    background: rgba(12,14,18,.94); border-top: 1px solid rgba(255,255,255,.12);
}
.reel-drawer .btn-2 { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.reel-drawer .btn-2:hover { background: rgba(255,255,255,.24); }

/* ─────────────────────────────────────────────── upload */

.drop {
    border: 2px dashed var(--line-2); border-radius: 16px; background: #FCFCFD;
    padding: 30px 18px; text-align: center; cursor: pointer;
    transition: border-color .18s, background .18s;
}
.drop:hover, .drop.is-over { border-color: var(--brand); background: var(--brand-50); }
.drop-empty .material-symbols-outlined { font-size: 44px; color: var(--brand); display: block; }
.drop-empty strong { display: block; margin: 10px 0 3px; font-size: 15px; }

.drop-preview { position: relative; }
.drop-preview video {
    max-height: 320px; width: auto; max-width: 100%; border-radius: 12px;
    background: #06070A; display: block; margin: 0 auto;
}
.drop-change {
    margin-top: 12px; border: 1px solid var(--line-2); background: #fff; cursor: pointer;
    border-radius: 10px; padding: 7px 14px; font-family: inherit;
    font-size: 13px; font-weight: 600;
}

/* A warning rather than a refusal reads differently from an error. */
.err.is-soft { color: var(--amber); }

/* ─────────────────────────────────────────────── why-this-reel */

.why-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.why-row:last-of-type { border-bottom: 0; }
.why-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.why-top .t { font-size: 13.5px; font-weight: 700; }
.why-top .v { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.why-bar { height: 7px; border-radius: 999px; background: var(--line); margin: 8px 0 6px; overflow: hidden; }
.why-bar span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-light), var(--brand-deep));
    transition: width .5s cubic-bezier(.22,1,.36,1);
}
.why-row .d { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.why-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--line-2);
    font-size: 13.5px; font-weight: 700;
}
.why-total strong { font-size: 22px; letter-spacing: -.02em; }

/* ═══════════════════════════════════════════════ the desktop player
 *
 * A phone shows the video and puts everything on top of it, because there
 * is nothing else on the screen. A desktop has room either side of a
 * portrait video and no thumb to reach with, so nothing needs to sit over
 * the picture: the actions move out beside it, the words move under it, and
 * the sound control goes to the top where every reel player keeps it.
 *
 * The frame stays a fixed width and the video fills it, never cropped. A
 * video filmed the long way round therefore shows its whole frame with black
 * above and below — which is the honest answer to "it was filmed
 * horizontally", rather than cutting the ends off to make it portrait.
 */
@media (min-width: 760px) {
    /* Full bleed and black, not a rounded card floating on white. */
    .page-reels .mwrap { padding: 0; }
    .reel-stageframe {
        max-width: none; margin: 0; border-radius: 0; box-shadow: none;
        background: #000;
    }
    .reel-rail { background: #000; }

    .reel { display: flex; align-items: center; justify-content: center; gap: 20px; }

    /*
     * The column hugs the video rather than boxing it.
     *
     * A fixed 440px frame meant a portrait video was letterboxed down the
     * sides and a landscape one top and bottom — invisible, because the bars
     * were black on black, but it also left the caption and the action rail
     * sitting against the frame instead of against the picture.
     *
     * So the stage takes whatever height is going and the video's own shape
     * decides the width: `height: 100%` on the video makes its height
     * definite, `width: auto` resolves from the aspect ratio, and the stage
     * shrink-wraps to it. Nothing is cropped and nothing is padded.
     */
    /*
     * A grid, not a flex column — and that is the load-bearing part.
     *
     * `height: 100%` on the video has to resolve against something
     * definite. A flex item sized `auto` is not definite while its own
     * contents are what decide its size, so the percentage fell back to the
     * video's natural height and a 720×1280 clip rendered at 720×1280,
     * overflowing the stage and cutting the bottom off.
     *
     * A `minmax(0, 1fr)` grid row is definite before its contents are
     * measured. The chain then resolves cleanly: row → stage height →
     * video height → video width from the aspect ratio → stage shrink-wraps
     * to the picture. Nothing is cropped, nothing is padded, and the
     * caption underneath is exactly as wide as the video above it.
     */
    .reel-player {
        position: relative; inset: auto;
        width: auto;
        max-width: min(900px, calc(100vw - 420px));
        height: 100%;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: auto;
        justify-items: center;
        padding: 16px 0;
    }

    /*
     * The video's own shape, handed over by the player.
     *
     * Letting the width fall out of `height: 100%` on the <video> looks
     * like it should work and does not: the stage's width depends on the
     * video and the video's height depends on the stage, and the browser
     * breaks the circle by using the file's natural size — a 720×1280 clip
     * rendered 1280 tall and ran off the bottom of the screen.
     *
     * `--reel-ar` is set from `videoWidth / videoHeight` the moment the
     * metadata arrives (see reels.js). With a definite height and a known
     * ratio the width is arithmetic, and `contain` then has nothing left to
     * letterbox. The fallback is a portrait phone video, which is what
     * nearly all of these are.
     */
    .reel-stage {
        position: relative; inset: auto;
        height: 100%; width: auto; min-height: 0; min-width: 0;
        aspect-ratio: var(--reel-ar, 9 / 16);
        max-width: 100%;
        display: grid; place-items: center;
        border-radius: 10px; overflow: hidden; background: #000;
    }
    .reel-video {
        width: 100%; height: 100%; object-fit: contain;
        background: #000;
    }

    /* Over the bottom of the picture, on a mild gradient — the name and the
       caption belong to the video, not to the page around it. Clipped to
       the stage, so they follow the video's own corners whatever shape it
       came out. */
    .reel-meta {
        padding: 72px 0 16px;
        background: linear-gradient(transparent, rgba(0,0,0,.72) 58%);
    }
    .reel-meta-in { padding: 0 16px; }
    .reel-author .n { font-size: 14.5px; }
    .reel-body { margin-top: 7px; -webkit-line-clamp: 2; }

    /* Beside the video, vertically centred, counts under each mark. */
    .reel-acts {
        position: relative; right: auto; bottom: auto;
        align-self: center; gap: 22px;
    }
    .reel-act { gap: 4px; text-shadow: none; }
    .reel-act .material-symbols-outlined {
        font-size: 26px;
        width: 44px; height: 44px; border-radius: 50%;
        display: grid; place-items: center;
        background: rgba(255,255,255,.1);
        transition: background .16s, transform .16s;
    }
    .reel-act:hover .material-symbols-outlined {
        background: rgba(255,255,255,.2); transform: none;
    }
    .reel-act.is-on .material-symbols-outlined { background: rgba(251,113,133,.18); }
    .reel-act .c { font-size: 12px; font-weight: 600; opacity: .9; }
    /* Sound has its own control at the top on a desktop. */
    .reel-act.is-sound { display: none; }

    /* Top centre, over the black rather than over the video. */
    .reel-sound {
        display: grid; place-items: center;
        position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
        z-index: 5;
        width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
        background: rgba(255,255,255,.12); color: #fff;
        transition: background .16s;
    }
    .reel-sound:hover { background: rgba(255,255,255,.22); }
    .reel-sound .material-symbols-outlined { font-size: 22px; }

    /* Far right. A snap rail driven by a mouse wheel is a fight; these are
       the way out of it. */
    .reel-nav {
        display: flex; flex-direction: column; gap: 14px;
        position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
        z-index: 5;
    }
    .reel-step {
        width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
        border: 1px solid rgba(255,255,255,.3);
        background: rgba(255,255,255,.08); color: #fff;
        display: grid; place-items: center;
        transition: background .16s;
    }
    .reel-step:hover { background: rgba(255,255,255,.2); }
    .reel-step[disabled] { opacity: .3; cursor: default; }
    .reel-step .material-symbols-outlined { font-size: 26px; }

    .reel-drawer { left: 50%; right: auto; transform: translateX(-50%); width: min(440px, 90vw); }

    /* ── the thread, beside the video ───────────────────────────────────
     *
     * A reel's comments used to be a link to the post's own page, which
     * meant leaving the rail to read three of them and then finding your
     * way back. They now slide in from the right and the video shifts left
     * to make room — which is what every reel player does, and the only
     * arrangement where you can watch and read at once.
     */
    /*
     * It fades in; it does not slide.
     *
     * A slide means animating `transform`, and an entry animation that ends
     * at a transform-free state has a failure mode: anything that stops it
     * at its first frame — the site's own reduced-motion block squashes
     * every animation to 0.001s, and a tab that is not being painted does
     * not advance one at all — leaves the panel parked at translateX(100%),
     * entirely off the right of the screen. Opacity cannot do that: at
     * worst it appears without the flourish, in the right place.
     */
    /* White, like every other sheet of comments in the application.
     *
     * It was dark to match the stage behind it, which meant the thread
     * partial — written for white paper — needed a dozen inverted rules to
     * stay readable, and comments looked like a different app here than in
     * the feed. The panel is a document; the player is a screen. They do
     * not have to agree. */
    .reel-comments {
        position: absolute; top: 0; right: 0; bottom: 0; z-index: 7;
        width: min(400px, 34vw);
        display: flex; flex-direction: column;
        background: #fff;
        box-shadow: -14px 0 40px rgba(0,0,0,.4);
        animation: reelPanelIn .18s ease-out;
    }
    @keyframes reelPanelIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .reel-comments-head {
        display: flex; align-items: center; gap: 10px; flex: none;
        padding: 14px 10px 13px 18px;
        border-bottom: 1px solid var(--line);
    }
    .reel-comments-head strong { flex: 1; font-size: 15px; letter-spacing: -.01em; }

    .reel-comments-body {
        flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 20px;
    }

    /* The video steps aside rather than sitting under the panel. */
    .reel-stageframe.has-comments .reel-player {
        max-width: min(900px, calc(100vw - 420px - min(400px, 34vw)));
    }
    .reel-stageframe.has-comments .reel-nav { display: none; }
    .reel-stageframe.has-comments .reel-acts { margin-right: min(400px, 34vw); }
}

/* Below this there is no room beside the video, so the thread goes back to
   being the post's own page — which is what the anchor already says. */
@media (max-width: 1099px) {
    .reel-comments { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .reel-comments { animation: none; }
}

/* Below this the nav arrows and the action column would crowd the video off
   the screen, so the player stays a column and the arrows go. */
@media (min-width: 760px) and (max-width: 1023px) {
    .reel-nav { display: none; }
    .reel-player { width: min(400px, calc(100vw - 220px)); }
}

@media (prefers-reduced-motion: reduce) {
    .reel-act .material-symbols-outlined, .why-bar span, .reel-progress span { transition: none; }
}