/* THE ARROWS OF THE FILE DETAIL (2026-10-03, view/js/vk_detail_nav.js). His words: "coloca unas flechas de navegacion en el modal detalle donde puedas pasar al siguiente item o
   al anterior". Since 2026-10-06 ("deberian siempre estar a la misma altura ... Ponlo siempre mas abajo de los botones verticales"): both together under the column of round
   buttons (style.css .button_actions: 40 px rounds, absolute, 16 px from the right), in the column's own box, at one height for every file - the script sets `top`. Their look:
   a dark round and a white mark, which read on any picture, light or dark. Brief BO (2026-10-10, his "ARROWS NAVIGATION ALSO IN WIDE MODE"): they stand in the zoomed view too, at the
   middle of its two sides (view/js/vk_detail_nav.js place()); they used to be gone there (view/js/vk_zoom.js .is-zoomed). */
.watch_item_modal .vkDetailNav-btn{
    position: absolute; z-index: 998; width: 40px; height: 40px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #ffffff; cursor: pointer;
    transition: background .15s ease;
}
.watch_item_modal .vkDetailNav-btn[hidden]{ display: none; }
.watch_item_modal .vkDetailNav-prev{ right: 64px; }                        /* until the script sets `left` under the column's rounds */
.watch_item_modal .vkDetailNav-next{ right: 16px; }
.watch_item_modal .vkDetailNav-btn[style*="left"]{ right: auto; }
.watch_item_modal .vkDetailNav-btn:hover{ background: rgba(0, 0, 0, .82); }
.vkDetailNav-pulling .watch_item_modal .vkDetailNav-next{ opacity: .55; cursor: progress; }   /* › at the last card while the next batch comes (infinite, 2026-10-07) */
.watch_item_modal .vkDetailNav-btn:focus-visible{ outline: 2px solid #ffffff; outline-offset: 2px; }
/* ‹ at the stage's left end (2026-10-07, his "pon la flecha de la izquierda en la otra punta"): a wide picture's layout (.vkDetail--strip) puts the
   versions strip under its short stage, right where ‹ stands - the strip makes room for it (measured: ‹ covered the first version's tile) */
@media (min-width: 768px){
    #watch_item_modal:has(.vkDetail--strip) .vkVer{ padding-left: 72px; }
}
/* a phone: the column of round buttons runs down the screen (measured at 380 px: 145 to 561 of 812), so the arrows stand at the foot of the screen, 16 px in as the column
   is - fixed to the layer, which fills the screen there */
@media (max-width: 767px){
    .watch_item_modal .vkDetailNav-btn{ position: fixed; top: auto; bottom: 20px; }
    .watch_item_modal .vkDetailNav-prev{ left: 16px; right: auto; }
    .watch_item_modal .vkDetailNav-next{ right: 16px; }
}
/* the swipe to the next or the previous file (view/js/vk_detail_nav.js, 2026-10-13): on the public web and a person's panel, at the phone's 1125 px and under, the stage leaves the sideways pan to the
   script and keeps the layer's scroll and the browser's pinch */
@media (max-width: 1125px){
    body.vkLanding .watch_item_modal .casing, body.vkPhonePerson .watch_item_modal .casing{ touch-action: pan-y pinch-zoom; }
}