/* Tooltips: a small "i" after each explained label + one floating bubble (tips.js). */
.tip-i {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; vertical-align: 1px;
  border-radius: 50%; font: 700 10px/1 var(--font); font-style: italic; text-transform: none; letter-spacing: 0;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  cursor: help; opacity: .75; transition: opacity .15s, transform .15s; user-select: none;
}
.tip-i:hover, .tip-i:focus-visible { opacity: 1; transform: scale(1.12); }
th .tip-i { margin-left: 4px; }
.page-tip {
  appearance: none; width: 22px; height: 22px; margin-left: 10px; vertical-align: 3px; font-size: 12px; font-style: normal;
  color: #fff; background: var(--grad); border: 0; opacity: .9;
}
.tip-pop {
  position: absolute; z-index: 1000; max-width: min(340px, calc(100vw - 16px)); padding: 9px 12px;
  border-radius: var(--r-md); background: #1e1b4b; color: #f5f3ff; font-size: 12.5px; line-height: 1.45; font-weight: 450;
  text-transform: none; letter-spacing: 0; box-shadow: var(--shadow-3); pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .12); animation: tip-in .12s var(--ease);
}
.tip-pop::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; transform: rotate(45deg); border-right: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.tip-pop.below::after { bottom: auto; top: -5px; transform: rotate(225deg); }
[data-tip]:not(.tip-i):not(button):not(.btn):not(a) { cursor: help; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) { .tip-pop { background: #312e81; } }
@media print { .tip-i, .page-tip, .tip-pop { display: none !important; } }