/* Lightweight hover/focus tooltip (CSS-only, accessible via tabindex).
   Usage:
     <span class="tip" tabindex="0" role="note" aria-label="…">
       <span class="material-symbols-rounded tip__icon">info</span>
       <span class="tip__bubble" role="tooltip">Help text… <span class="tip__eg">e.g. …</span></span>
     </span>
   Add `tip--end` when the trigger sits near a container's right edge so the
   bubble anchors right instead of centered (avoids clipping). */

.tip { position: relative; display: inline-flex; cursor: help; color: var(--md-sys-color-primary); outline: none; }
.tip__icon { font-size: 15px; line-height: 1; }
.tip__bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 280px; z-index: 40;
  display: block;
  background: var(--md-sys-color-surface, #fff); color: var(--md-sys-color-on-surface, #1d1b20);
  border: 1px solid var(--md-sys-color-outline-variant, #d7d3dc); border-radius: var(--r-md, 12px);
  box-shadow: var(--elev-2); padding: .65rem .75rem;
  font-size: .76rem; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: normal;
  white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Hide is DELAYED 500ms so the bubble lingers after the pointer leaves the
     trigger — long enough to cross the gap and land on the bubble (which then
     re-holds it via :hover), making links inside the bubble clickable. */
  transition: opacity .12s ease .5s, transform .12s ease .5s, visibility 0s linear .62s;
}
.tip:hover .tip__bubble,
.tip:focus .tip__bubble,
.tip:focus-within .tip__bubble {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
  /* Show instantly (no delay). */
  transition: opacity .12s ease, transform .12s ease;
}
/* little caret */
.tip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--md-sys-color-surface, #fff);
  filter: drop-shadow(0 1px 0 var(--md-sys-color-outline-variant, #d7d3dc));
}
.tip__eg { display: block; margin-top: .45rem; color: var(--md-sys-color-on-surface-variant, #49454f); }
/* Right-anchored variant so a tooltip near a container's right edge doesn't clip. */
.tip--end .tip__bubble { left: auto; right: -2px; transform: translateX(0) translateY(4px); }
.tip--end:hover .tip__bubble,
.tip--end:focus .tip__bubble,
.tip--end:focus-within .tip__bubble { transform: translateX(0) translateY(0); }
.tip--end .tip__bubble::after { left: auto; right: 6px; transform: none; }
.tip__bubble code { background: var(--md-sys-color-surface-variant, #eee); padding: 0 .25rem; border-radius: 4px; font-size: .72rem; }