/* The SDI Lab "!" hint, adapted to SQLPage's Tabler theme. Same behaviour as .hint in projects/_shared/ui/ui.css. */
.sdi-hint {
  position: relative; display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-left: 8px; border-radius: 50%;
  border: 1.5px solid var(--tblr-secondary, #6c7a91); color: var(--tblr-secondary, #6c7a91);
  font: 700 11px/1 system-ui, sans-serif; cursor: help; vertical-align: middle;
}
.sdi-hint::before { content: "!"; }
.sdi-hint:hover, .sdi-hint:focus-visible { color: var(--tblr-primary, #206bc4); border-color: var(--tblr-primary, #206bc4); outline: none; }
.sdi-hint .sdi-hint-tip {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1050;
  width: max-content; max-width: min(280px, 80vw); padding: 8px 10px; border-radius: 6px;
  background: #1b1b19; color: #f6f6f3; font: 400 0.82rem/1.45 system-ui, sans-serif; text-align: left; white-space: normal;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 0s linear 120ms;
}
.sdi-hint:hover .sdi-hint-tip, .sdi-hint:focus .sdi-hint-tip { opacity: 1; visibility: visible; transition-delay: 0s; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { .sdi-hint .sdi-hint-tip { transition: none; } }