/* Who we work with (the Shelf). In a closed card the icon sits in the middle and the name and type are centred at its foot.
   The label has a fixed width (set by the window, not by the card; scoped to #scan so it outranks the page's inline styles, which load later), so while a card widens or narrows nothing inside it re-wraps or slides:
   the label of the card that opens fades out at once; the label of the card that closes fades back in only after it has finished narrowing. */
@media (min-width:901px){
  /* the label is its own layer (translate3d + will-change), so circle and icon move as one picture and never round to different pixels;
     it fades back in only after the card has fully finished narrowing (.85s), so it never rides along with the moving centre */
  #scan.hh .lab{left:50%;right:auto;width:clamp(104px,9.2vw,138px);transform:translate3d(-50%,0,0);will-change:transform,opacity;backface-visibility:hidden;
    align-items:center;text-align:center;transition:opacity .45s ease .95s}
  #scan.hh .gx.on .lab{opacity:0;transition:opacity .18s ease 0s}
  #scan.hh .lab>.emblem{margin-top:auto;margin-bottom:auto;width:52px;height:52px}
  #scan.hh .emblem .ico{display:block;width:24px;height:24px}
  /* the name always has room for two lines and sits at the foot, so every icon is centred at the same height whether the name wraps or not */
  #scan.hh .lab>div{width:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(clamp(20px,min(1.9vw,3vh),27px) * 2.1)}
  #scan.hh .lab .ptype{margin-inline:auto}
}