:root{
  --compact-pop-shadow:0 14px 30px rgba(32,36,44,.14);
}
html[data-theme=dark]{
  --compact-pop-shadow:0 18px 36px rgba(0,0,0,.38);
}

.card{
  position:relative;
  z-index:0;
  min-height:52px;
  padding:8px 11px;
  gap:10px;
  overflow:visible;
}
.card .copy{
  display:flex;
  align-items:center;
  min-height:36px;
}
.card .name{
  width:100%;
}
.card .desc{
  position:absolute;
  left:-1px;
  right:auto;
  top:calc(100% + 7px);
  z-index:40;
  width:100%;
  max-width:100%;
  margin:0;
  padding:11px 13px 12px;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--compact-pop-shadow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px);
  text-align:left;
  line-height:1.55;
  -webkit-line-clamp:3;
  transition:
    opacity .14s ease 0s,
    transform .14s ease 0s,
    visibility 0s linear .14s;
}
.card .desc::before{
  content:attr(data-popover-title);
  display:block;
  margin-bottom:4px;
  color:var(--text);
  font-size:.87rem;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card.popover-end .desc{
  left:auto;
  right:-1px;
}

@media (hover:hover) and (pointer:fine){
  .card:hover,
  .card:focus-visible{
    z-index:35;
  }
  .card:hover .desc,
  .card:focus-visible .desc{
    width:min(300px,calc(100vw - 28px));
    max-width:min(300px,calc(100vw - 28px));
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition-delay:.3s,.3s,.3s;
  }
}

@media (hover:none), (pointer:coarse){
  .card{
    min-height:52px;
    padding:8px 10px;
  }
  .card .desc{
    display:none!important;
  }
}

@media(max-width:580px){
  .card{
    min-height:50px;
    padding:8px 10px;
    gap:9px;
  }
  .card .copy{
    min-height:34px;
  }
  .card .name{
    font-size:.91rem;
  }
}

@media(max-width:380px){
  .card{
    min-height:48px;
    padding:7px 9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .card .desc{
    transition-delay:0s!important;
    transform:none!important;
  }
}