/* Higher Self - build 1321. Dockul cu 4 butoane (js/99e-dock.js), dupa preview-ul dock-5 aprobat.
   Placa: culoarea fundalului zonei, mai deschisa ("New Soul"). Cercurile: --fvPillFill, ca la dockul vechi.
   Butonul activ: pastila crem cu numele, care alunecă. Curba e lenta la ambele capete si dureaza mai mult
   decat in Audio, ca miscarea sa fie lina, nu sacadata. */
body{--dk5Plate:rgb(81,70,112)}
body[data-cat="soul"]{--dk5Plate:rgb(81,70,112)}
body[data-cat="mind"]{--dk5Plate:rgb(65,75,104)}
body[data-cat="body"]{--dk5Plate:rgb(66,89,77)}
#dock.dk5, .dock.dk5{
  --dk5Ease:cubic-bezier(.45,0,.2,1); --dk5T:.62s;
  gap:6px !important; padding:6px !important; border:0 !important; border-radius:999px !important;
  background:var(--dk5Plate) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.42) !important;
  transition:transform .4s cubic-bezier(.3,.65,.25,1), opacity .3s ease, background-color .5s ease !important;
}
#dock.dk5::before, .dock.dk5::before{content:none !important; display:none !important}
.dk5 .dk5Ind{position:absolute; top:6px; bottom:6px; left:6px; width:44px; border-radius:999px; background:#f5efe4;
  box-shadow:0 4px 14px rgba(0,0,0,.24); pointer-events:none; z-index:0; opacity:1;
  transition:left var(--dk5T) var(--dk5Ease), width var(--dk5T) var(--dk5Ease), opacity .35s ease}
.dk5 .dk5Ind.off{opacity:0}
.dk5 .dk5B{position:relative; z-index:1; flex:0 0 auto; height:44px; width:auto; min-width:44px; padding:0 11px 0 0; margin:0; border:0; border-radius:999px;
  background:var(--fvPillFill,#aa8fc8); color:#1d1630; box-shadow:none;
  display:flex; align-items:center; justify-content:flex-start; gap:0; overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-family:var(--font-body); font-size:14px; font-weight:700; line-height:1;
  transition:padding var(--dk5T) var(--dk5Ease), gap var(--dk5T) var(--dk5Ease), background-color .45s ease, transform .18s ease}
.dk5 .dk5B svg{width:22px; height:22px; flex:none; margin-left:11px; display:block; transform:translateY(var(--dk5Y,0px)); fill:currentColor; transition:margin var(--dk5T) var(--dk5Ease)}
.dk5 .dk5B span{display:block; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transform:translateX(-6px);
  transition:max-width var(--dk5T) var(--dk5Ease), opacity .2s ease, transform var(--dk5T) var(--dk5Ease)}
.dk5 .dk5B.on{background-color:transparent; gap:8px; padding-right:15.75px}
.dk5 .dk5B.on svg{margin-left:14.25px}
/* 1323 [stated]: iconita si textul centrate optic in pastila. Fiecare iconita are alt gol in jurul desenului,
   asa ca marginea din stanga se potriveste ca golul vizibil din stanga sa fie egal cu cel din dreapta textului. */
.dk5 .dk5B.on[data-k="tools"] svg{margin-left:13.25px}
.dk5 .dk5B.on[data-k="tools"]{padding-right:15.75px}
.dk5 .dk5B.on[data-k="audio"] svg{margin-left:13.25px}
.dk5 .dk5B.on[data-k="audio"]{padding-right:15.75px}
.dk5 .dk5B.on[data-k="me"] svg{margin-left:12.25px}
.dk5 .dk5B.on[data-k="me"]{padding-right:15.75px}
/* in romana "Eu" si "Unelte" au alt gol optic la capatul textului */
.dk5[data-lg="ro"] .dk5B.on[data-k="me"] svg{margin-left:12.75px}
.dk5[data-lg="ro"] .dk5B.on[data-k="me"]{padding-right:15.25px}
.dk5[data-lg="ro"] .dk5B.on[data-k="tools"] svg{margin-left:13.25px}
.dk5[data-lg="ro"] .dk5B.on[data-k="tools"]{padding-right:15.75px}
.dk5 .dk5B.on span{max-width:var(--dk5W,120px); opacity:1; transform:none;
  transition:max-width var(--dk5T) var(--dk5Ease), opacity .4s ease .2s, transform var(--dk5T) var(--dk5Ease)}
.dk5 .dk5B:active{transform:scale(.95)}
/* masuratoarea si asezarea fara animatie (la pornire, la schimbarea limbii) */
.dk5.dk5Still, .dk5.dk5Still .dk5Ind, .dk5.dk5Still .dk5B, .dk5.dk5Still .dk5B svg, .dk5.dk5Still .dk5B span,
.dk5Calc .dk5Ind, .dk5Calc .dk5B, .dk5Calc .dk5B svg, .dk5Calc .dk5B span{transition:none !important}
/* centrul optic pe verticala, per iconita (masurat in pixeli pe ecran 4x) */
.dk5 .dk5B[data-k="home"]{--dk5Y:-.25px}
.dk5 .dk5B[data-k="tools"]{--dk5Y:0px}
.dk5 .dk5B[data-k="audio"]{--dk5Y:.38px}
.dk5 .dk5B[data-k="me"]{--dk5Y:-.38px}
/* pozitia dockului e mereu pe pixel intreg (js/99e calculeaza --dk5L), altfel iconitele cad pe jumatati de pixel si par mutate */
#dock.dk5{left:var(--dk5L,50%) !important; transform:none !important;
  transition:left var(--dk5T) var(--dk5Ease), transform .4s cubic-bezier(.3,.65,.25,1), opacity .3s ease, background-color .5s ease !important}
body.dkOff #dock.dk5{transform:translateY(120px) !important}