/* Reels: one video at a time. Phone: full screen, swipe up/down. Desktop: a phone-shaped column in the middle with arrows. */
html:has(body.reels-page){overflow:hidden;}
body.reels-page{height:100dvh; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; background:var(--paper);}
body.reels-page header{flex:none; position:relative;}
body.reels-page .mn-row{flex:none; position:relative; top:auto;}

.rl{position:relative; flex:1; min-height:0; background:var(--paper);}
.rl-scroll{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; scrollbar-width:none; outline:none;}
.rl-scroll::-webkit-scrollbar{display:none;}

/* one reel */
.rl-slide{height:100%; padding-block:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; scroll-snap-align:start; scroll-snap-stop:always;}
.rl-card{position:relative; flex:none; align-self:stretch; margin-block:10px; height:auto; aspect-ratio:9/16; max-width:100%; border-radius:20px; overflow:hidden; background:#000; color:#fff; isolation:isolate;}
.rl-media{position:absolute; inset:0; z-index:0;}
.rl-poster,.rl-video{position:absolute; inset:0; width:100%; height:100%; background:#000;}
.rl-cover .rl-poster,.rl-cover .rl-video{object-fit:cover;}
.rl-contain .rl-poster,.rl-contain .rl-video{object-fit:contain;}
.rl-video{opacity:0; transition:opacity .2s;}
.rl-slide.is-live .rl-video{opacity:1;}
.rl-tap{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.rl-flash{position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; background:rgb(0 0 0 / .5); display:grid; place-items:center; opacity:0; transform:scale(.8); pointer-events:none; transition:opacity .2s, transform .2s;}
.rl-flash svg{width:34px; height:34px; fill:#fff;}
.rl-slide.is-paused .rl-flash{opacity:1; transform:none;}
.rl-spin{position:absolute; inset:0; margin:auto; width:34px; height:34px; border-radius:50%; border:3px solid rgb(255 255 255 / .3); border-top-color:#fff; opacity:0; pointer-events:none; animation:rlspin .8s linear infinite;}
.rl-slide.is-wait .rl-spin{opacity:1;}
@keyframes rlspin{to{transform:rotate(360deg);}}
.rl-bar{position:absolute; inset-inline:0; bottom:0; height:3px; background:rgb(255 255 255 / .22); pointer-events:none;}
.rl-bar i{display:block; height:100%; width:0; background:#fff;}
.rl-shade{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgb(0 0 0 / .28) 0, transparent 20%, transparent 52%, rgb(0 0 0 / .78) 100%);}

/* who + caption */
.rl-info{position:absolute; z-index:2; inset-inline:0; bottom:0; padding:0 74px 18px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; pointer-events:none;}
html[dir="rtl"] .rl-info{padding:0 16px 18px 74px;}
.rl-info > *{pointer-events:auto;}
.rl-author{display:flex; align-items:center; gap:10px; min-width:0; max-width:100%;}
.rl-author .fp-av{width:40px; height:40px; background:rgb(255 255 255 / .18); color:#fff; border:2px solid rgb(255 255 255 / .85);}
.rl-who{display:flex; flex-direction:column; gap:2px; min-width:0;}
.rl-who b{font:700 15px/1.25 'Inter',sans-serif; text-shadow:0 1px 6px rgb(0 0 0 / .6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rl-who span{font-size:12.5px; opacity:.85; text-shadow:0 1px 6px rgb(0 0 0 / .6); direction:ltr; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html[dir="rtl"] .rl-who span{direction:rtl;}
.rl-cap{font:500 14.5px/1.5 'Inter',sans-serif; text-shadow:0 1px 6px rgb(0 0 0 / .7); white-space:pre-wrap; overflow-wrap:anywhere; max-height:3em; overflow:hidden; cursor:pointer;}
.rl-cap.is-open{max-height:38dvh; overflow:auto;}
html[lang="ar"] .rl-cap{font-family:'Noto Sans Arabic','Inter',sans-serif; line-height:1.7;}
html[lang="ja"] .rl-cap{font-family:'Noto Sans JP','Inter',sans-serif;}
.rl-cap .fp-tag,.rl-cap .fp-ment{color:#fff; font-weight:700;}
.rl-capmore{padding:0; border:0; background:none; color:rgb(255 255 255 / .85); font:700 13px/1 'Inter',sans-serif; cursor:pointer;}
.rl-capmore[hidden]{display:none;}

/* sound */
.rl-mute{position:absolute; z-index:3; top:14px; inset-inline-end:14px; width:40px; height:40px; border-radius:50%; border:0; background:rgb(0 0 0 / .45); color:#fff; display:grid; place-items:center; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.rl-mute svg{width:20px; height:20px;}
.rl-mute .rl-i-on{display:none;}
.rl.is-sound .rl-mute .rl-i-on{display:block;}
.rl.is-sound .rl-mute .rl-i-off{display:none;}
.rl-mute:focus-visible,.rl-tap:focus-visible{outline:2px solid #fff; outline-offset:-4px;}

/* actions: on the card (phone) / beside it (desktop) */
.rl-side{position:absolute; z-index:5; inset-inline-end:10px; bottom:18px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.rl-act{display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none; padding:0; color:#fff; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.rl-ico{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgb(0 0 0 / .42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .15s, background .15s;}
.rl-ico svg{width:23px; height:23px;}
.rl-act:hover .rl-ico{background:rgb(0 0 0 / .62);}
.rl-act:active .rl-ico{transform:scale(.92);}
.rl-act:focus-visible{outline:none;}
.rl-act:focus-visible .rl-ico{outline:2px solid #fff; outline-offset:2px;}
.rl-n{font:700 12px/1 'Inter',sans-serif; text-shadow:0 1px 5px rgb(0 0 0 / .7); max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html[lang="ar"] .rl-n,html[lang="ja"] .rl-n{font-family:inherit;}
.rl-heart{fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round;}
.rl-like.is-on .rl-ico{background:rgb(255 255 255 / .94);}
.rl-like.is-on .rl-heart{fill:#e5484d; stroke:#e5484d;}
.rl-like .rx{--s:30px;}
.rl-like.is-pop .rl-ico{animation:rlpop .35s ease;}
@keyframes rlpop{50%{transform:scale(1.22);}}
.rl-open .rl-n,.rl-share .rl-n{font-weight:600;}

/* reaction picker: a pill that opens beside the like button, towards the video */
.rl-react{position:relative; display:flex; justify-content:center;}
.rl-picker{position:absolute; z-index:8; inset-inline-end:calc(100% + 8px); top:0; display:flex; gap:2px; padding:6px; background:var(--white,#221D17); border:1px solid var(--border-soft); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.rl-picker[hidden]{display:none;}
.rl-pick{border:0; background:transparent; padding:3px; border-radius:50%; cursor:pointer; transition:transform .12s; -webkit-tap-highlight-color:transparent;}
.rl-pick:hover,.rl-pick:focus-visible{transform:translateY(-4px) scale(1.14);}
.rl-pick:focus-visible{outline:2px solid #fff; outline-offset:1px;}
.rl-pick.is-on{box-shadow:0 0 0 2px var(--blue,#5FB0DE);}
.rl-picker .rx.lg{--s:34px;}
@media (max-width:420px){ .rl-picker{gap:0; padding:5px;} .rl-picker .rx.lg{--s:clamp(24px, 7.2vw, 30px);} }

/* spoiler */
.rl-card.is-spoiler .rl-media{filter:blur(28px) brightness(.7);}
.rl-card.is-spoiler.is-shown .rl-media{filter:none;}
.rl-reveal{position:absolute; inset:0; z-index:4; border:0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; font:700 18px/1.3 'Inter',sans-serif; text-shadow:0 1px 8px rgb(0 0 0 / .7);}
.rl-reveal small{font:500 13px/1.3 'Inter',sans-serif; opacity:.85;}
.rl-card.is-shown .rl-reveal{display:none;}

/* desktop: actions sit outside the card, on the page background */
@media (min-width:721px){
  .rl-card{overflow:visible;}
  .rl-media,.rl-shade{border-radius:20px; overflow:hidden;}
  .rl-side{inset-inline-end:auto; inset-inline-start:calc(100% + 14px); bottom:6px;}
  .rl-side .rl-ico{background:var(--white); border:1px solid var(--border-soft); color:var(--navy); -webkit-backdrop-filter:none; backdrop-filter:none;}
  .rl-side .rl-act{color:var(--navy-soft);}
  .rl-side .rl-n{text-shadow:none; color:var(--navy-soft);}
  .rl-act:hover .rl-ico{background:var(--blue-tint); border-color:var(--blue);}
  .rl-act:focus-visible .rl-ico{outline-color:var(--blue);}
  .rl-like.is-on .rl-ico{background:var(--white); border-color:#e5484d;}
  .rl-info{padding-inline-end:16px;}
  .rl-slide{padding:0 80px;}
}

/* desktop: no brand header on this page, the section row is the top bar (more room for the video) */
@media (min-width:721px){ body.reels-page > header{display:none;} }

/* desktop arrows + hint */
.rl-arrows{position:absolute; z-index:5; inset-inline-end:28px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px;}
.rl-arrow{width:46px; height:46px; border-radius:50%; border:1px solid var(--border-soft); background:var(--white); color:var(--navy); display:grid; place-items:center; cursor:pointer; transition:background .15s, border-color .15s, opacity .15s;}
.rl-arrow svg{width:22px; height:22px;}
.rl-arrow:hover{background:var(--blue-tint); border-color:var(--blue);}
.rl-arrow:disabled{opacity:.35; cursor:default;}
.rl-arrow:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.rl-keys{position:absolute; z-index:5; inset-inline-start:24px; bottom:14px; margin:0; font:600 12px/1.4 'Inter',sans-serif; color:var(--navy-soft); opacity:.8;}
html[lang="ar"] .rl-keys,html[lang="ja"] .rl-keys{font-family:inherit;}

/* end / loading / error */
.rl-end{height:100%; display:flex; align-items:center; justify-content:center; scroll-snap-align:start; color:var(--navy-soft); text-align:center; padding:24px;}
.rl-end[hidden]{display:none;}
.rl-loading{position:absolute; z-index:6; inset-inline:0; bottom:22px; display:flex; justify-content:center; pointer-events:none;}
.rl-loading[hidden],.rl-err[hidden]{display:none;}
.rl-spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--border-soft); border-top-color:var(--blue); animation:rlspin .8s linear infinite;}
.rl-err{position:absolute; z-index:6; inset-inline:0; bottom:22px; margin-inline:auto; width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:999px; background:var(--white); border:1px solid var(--border-soft); color:var(--navy); font:600 13.5px/1.3 'Inter',sans-serif;}
.rl-toast{position:fixed; left:50%; bottom:110px; transform:translate(-50%,20px); opacity:0; z-index:300; max-width:min(92vw,420px); background:#0E1B2E; color:#fff; padding:12px 18px; border-radius:999px; font:600 14px/1.4 'Inter',sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:opacity .25s, transform .25s; text-align:center;}
.rl-toast.is-in{opacity:1; transform:translate(-50%,0);}

/* phone: full screen, the bottom bar sits over the video */
@media (max-width:720px){
  body.reels-page.has-mn{padding-bottom:0;}
  .rl{background:#000;}
  .rl-slide{padding:0;}
  .rl-card{width:100%; height:100%; margin:0; align-self:auto; aspect-ratio:auto; border-radius:0;}
  .rl-info{padding:0 76px calc(80px + env(safe-area-inset-bottom)) 16px;}
  html[dir="rtl"] .rl-info{padding:0 16px calc(80px + env(safe-area-inset-bottom)) 76px;}
  .rl-side{bottom:calc(80px + env(safe-area-inset-bottom));}
  .rl-bar{bottom:calc(66px + env(safe-area-inset-bottom));}
  .rl-arrows,.rl-keys{display:none;}
  .rl-end{color:#fff;}
  .rl-toast{bottom:84px;}
  body.reels-page .rl-err{bottom:90px;}
}
@media (prefers-reduced-motion:reduce){ .rl-spin,.rl-spinner{animation-duration:2.4s;} .rl-like.is-pop .rl-ico{animation:none;} }