/* Lock-screen dock (gate-dock.js): top centre, same look as the dock in the app (dock.css provides shelf, items and labels) */
#vault-gate{position:relative}
/* At the top of the page (not fixed), so on a phone it does not float over the card while scrolling */
#gate-dock{position:absolute;top:max(22px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:60;--dock-size:38px}
#vault-gate:has(#gate-dock){padding-top:100px}
@media(max-width:760px){#gate-dock{--dock-size:36px}#vault-gate:has(#gate-dock){padding-top:92px}}
/* Labels below the icons stay inside narrow screens */
#gate-dock .dock-item:first-child .dock-tip{left:0;transform:translate(0,-3px)}
#gate-dock .dock-item:first-child:hover>.dock-tip,#gate-dock .dock-item:first-child:focus-within>.dock-tip{transform:translate(0,0)}
#gate-dock .dock-item:last-child .dock-tip{left:auto;right:0;transform:translate(0,-3px)}
#gate-dock .dock-item:last-child:hover>.dock-tip,#gate-dock .dock-item:last-child:focus-within>.dock-tip{transform:translate(0,0)}
#gate-dock .dock-item:first-child .dock-tip::before{left:18px}
#gate-dock .dock-item:last-child .dock-tip::before{left:auto;right:14px}