/* ─── generic [data-tooltip] bubble ───────────────────────────── */
[data-tooltip]{
    position:relative;                 /* anchor for the pseudo-el */
    cursor:help;
    /*   optional dashed underline like the dashboard   */
    text-decoration-line: underline;
    text-decoration-style: dashed;
  }
  
  [data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;                          /* centre horizontally   */
    bottom:calc(100% + .5rem);         /* 8 px above           */
    transform:translateX(-50%) scale(.95);
    opacity:0;
    pointer-events:none;
  
    /*  dashboard colours  */
    background:rgb(var(--btn-primary-background-color)/.95);
    color:#fff;
  
    /*  cosmetics  */
    white-space:nowrap;
    padding:.45rem .6rem;
    font-size:.825rem;                 /* ~13 px */
    line-height:1.25;
    border-radius:.375rem;             /* rounded-md */
    box-shadow:0 2px 6px rgb(0 0 0 / .15);
  
    transition:opacity .15s ease,transform .15s ease;
    z-index:30;
  }
  
  /*  reveal on hover **or** keyboard focus  */
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after{
    opacity:1;
    transform:translateX(-50%) scale(1);
  }
  
/* ─── bottom-placement variant ─────────────────────────────────────────── */
/* NOTE: keep it right next to the generic ::after/::before rules */

[data-tooltip][data-tooltip-pos="bottom"]::after{
    top: 100%;                     /* anchor to bottom edge of trigger   */
    margin-top: .45rem;            /* gap = arrow height                 */
    bottom: auto;                  /* override the default “above” rule  */
    transform:translateX(-50%) scale(.95);
  }
  
  [data-tooltip][data-tooltip-pos="bottom"]::before{    /* arrow */
    content: "";
    position:absolute;
    top: calc(100% + 1px);         /* sits under the bubble              */
    left: 50%;
    transform: translateX(-50%);
  
    border-width: .45rem .45rem 0; /* upside-down triangle               */
    border-style: solid;
    border-color: rgb(var(--btn-primary-background-color)) transparent transparent;
  }