.hub-search{
position:relative;
width:var(--pw3);
max-width:var(--max);
margin:0 auto var(--gap);
z-index:30;
}
.hub-search-box{
position:relative;
display:flex;
align-items:center;
}
.hub-search-icon{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
display:inline-flex;
width:18px;
height:18px;
color:var(--tx1);
pointer-events:none;
}
.hub-search-icon svg{
width:100%;
height:100%;
fill:currentColor;
}
.hub-search-input{
width:100%;
height:46px;
padding:0 44px 0 44px;
font-family:var(--ff1);
font-size:var(--fz2);
color:var(--tx1);
background-color:var(--bg5);
outline:none;
border:0;
border-radius:var(--br1);
box-shadow:none;
box-sizing:border-box;
}
.hub-search-input::placeholder::placeholder{
color:var(--tx3);
}
.hub-search.is-open .hub-search-input{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.hub-search-clear{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
display:none;
align-items:center;
justify-content:center;
font-size:22px;
line-height:1;
color:var(--tx3);
background:transparent;
border:none;
border-radius:50%;
cursor:pointer;
}
.hub-search-clear:hover{
color:var(--tx1);
background:rgba(128,128,128,.18);
}
.hub-search-clear.visible{
display:flex;
}
.hub-search-results{
position:absolute;
top:100%;
left:0;
right:0;
max-height:60vh;
overflow-y:auto;
background-color:var(--bg5);
border-radius:0 0 var(--br1) var(--br1);
box-shadow:none;
box-sizing:border-box;
padding:6px;
z-index:31;
}
.hub-search-group{
padding:8px 12px 4px;
font-family:var(--ff2);
font-size:var(--fz5);
font-weight:calc(700 + var(--fw-offset));
text-transform:uppercase;
letter-spacing:.06em;
color:var(--tx3);
}
.hub-search-r{
display:flex;
align-items:center;
gap:10px;
padding:9px 12px;
border-radius:var(--br1);
color:var(--tx1);
text-decoration:none;
}
.hub-search-r:hover,
.hub-search-r.is-active{
background-color:var(--bg6);
}
.hub-search-r-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
flex-shrink:0;
color:var(--tx3);
}
.hub-search-r-icon svg,
.hub-search-r-icon img{
width:100%;
height:100%;
object-fit:contain;
border-radius:var(--br1);
}
.hub-search-r-main{
display:flex;
flex-direction:column;
min-width:0;
flex:1;
}
.hub-search-r-name{
font-size:var(--fz3);
font-weight:calc(600 + var(--fw-offset));
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.hub-search-r-path{
font-size:var(--fz5);
color:var(--tx3);
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.hub-search-r-label{
flex-shrink:0;
font-size:var(--fz5);
color:var(--tx3);
white-space:nowrap;
margin-left:6px;
}
.hub-search-hl{
color:var(--cl1);
}
.hub-search-empty{
padding:18px 14px;
text-align:center;
font-size:var(--fz3);
color:var(--tx3);
}
.hub-search-more{
padding:8px 12px 4px;
font-size:var(--fz5);
color:var(--tx3);
text-align:center;
}
.hub-search-live{
width:min(720px,calc(100% - (var(--gap) * 2)));
max-width:var(--pw3);
z-index:20;
margin-top:calc(var(--gap) * -.5);
}
.hub-search-live .hub-search-input{
height:54px;
border-radius:var(--br1);
}
.simple-list>div.hub-live-row{
align-items:center;
}
.simple-list>div.simple-list-icon-row>span.hub-live-type{
flex:0 0 76px;
min-width:76px;
overflow:visible;
text-align:left;
white-space:nowrap;
font-size:var(--fz5);
font-weight:calc(700 + var(--fw-offset));
text-transform:uppercase;
letter-spacing:.04em;
color:var(--tx3);
}
.simple-list>div.hub-live-row>a{
display:inline-flex;
align-items:center;
gap:6px;
flex:0 1 auto;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
.hub-live-external{
display:inline-flex;
align-items:center;
justify-content:center;
width:14px;
height:14px;
flex:0 0 14px;
color:var(--tx3);
}
.hub-live-external svg,
.hub-live-external img{
width:100%;
height:100%;
fill:currentColor;
object-fit:contain;
}
.simple-list>div.hub-live-row>a:hover .hub-live-external{
color:var(--cl1);
}
.simple-list>div.hub-live-row>span.simple-list-meta{
flex:1 1 280px;
min-width:180px;
}
.hub-live-label{
color:var(--tx3);
font-size:var(--fz5);
font-weight:var(--fw1);
white-space:nowrap;
}
.simple-list>div.hub-live-empty{
justify-content:center;
color:var(--tx3);
text-align:center;
}