/* Tooltip base: ONLY elements explicitly marked */
.has-tt{
    position: relative;
  }
  
  /* default (TOP) */
  .has-tt::after{
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%, -100%);
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--tt-bg);
    color: var(--tt-text);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s, transform 0.16s;
    z-index: 9999;
  }
  
  .has-tt::before{
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--tt-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s;
    z-index: 9999;
  }
  
  .has-tt:hover::after,
  .has-tt:focus-visible::after{
    opacity: 1;
    transform: translate(-50%, -110%);
  }
  
  .has-tt:hover::before,
  .has-tt:focus-visible::before{
    opacity: 1;
  }
  
  /* BOTTOM modifier: only where needed (header buttons) */
  .has-tt.tt-bottom::after{
    top: auto;
    bottom: -10px;
    transform: translate(-50%, 100%);
  }
  
  .has-tt.tt-bottom::before{
    top: auto;
    bottom: -10px;
    border-top-color: transparent;
    border-bottom-color: var(--tt-bg);
}
  
  .has-tt.tt-bottom:hover::after,
  .has-tt.tt-bottom:focus-visible::after{
    transform: translate(-50%, 110%);
  }