/* ================= PARAMETER INFO TIPS ("i" icon + hover tooltip) ================= */

/* Trigger: small circular "i" appended to parameter labels by js/ui/info-tips.js.
   Negative block margins keep the label's line height unchanged; the negative inline-end
   margin cancels the icon's inline footprint so it never makes a label wrap — it hangs into
   the column gap instead. */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  margin: -4px -18px -4px 3px;
  padding: 0;
  vertical-align: middle;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  opacity: 0.55;
  cursor: help;
  transition: opacity 0.15s var(--md-ease), color 0.15s var(--md-ease), background-color 0.15s var(--md-ease);
}
.info-tip svg { display: block; }
/* Keeps the icon on the same line as the label's last word */
.info-tip-glue { white-space: nowrap; }
.info-tip:hover,
.info-tip[aria-expanded="true"] {
  opacity: 1;
  color: var(--md-primary);
  background: var(--md-primary-tint);
}
.info-tip:focus-visible {
  opacity: 1;
  color: var(--md-primary);
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}
.dc-stream > .info-tip { margin-top: 0; margin-right: 0; }
/* Set by fitInfoTips() when hanging would reach into the neighbouring column */
.info-tip.info-tip--inline { margin-right: 0; }
/* Brief labels clip overflow (ellipsis), so the icon must not hang outside them */
.obj-brief .f label > .info-tip { width: 14px; height: 14px; margin-right: 0; }

/* Bubble: one shared element, shown in the top layer via the Popover API */
.info-tip-bubble {
  position: fixed;
  inset: auto;
  left: var(--itb-x, 0px);
  top: var(--itb-y, 0px);
  margin: 0;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 11px 13px 12px;
  overflow: visible;
  background: var(--md-tooltip-bg);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-3);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  user-select: text;
  z-index: 1000;
}
.info-tip-bubble.is-visible { animation: itbIn 0.14s var(--md-ease); }
.info-tip-bubble[data-placement="top"] { --itb-shift: 4px; }
.info-tip-bubble[data-placement="bottom"] { --itb-shift: -4px; }
@keyframes itbIn {
  from { opacity: 0; transform: translateY(var(--itb-shift, 4px)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .info-tip-bubble.is-visible { animation: none; }
}

/* Arrow pointing at the icon */
.info-tip-bubble::after {
  content: '';
  position: absolute;
  left: calc(var(--itb-arrow-x, 50%) - 5px);
  width: 9px;
  height: 9px;
  background: var(--md-tooltip-bg);
  border: 1px solid var(--md-outline);
  transform: rotate(45deg);
}
.info-tip-bubble[data-placement="top"]::after { bottom: -5.5px; border-top-color: transparent; border-left-color: transparent; }
.info-tip-bubble[data-placement="bottom"]::after { top: -5.5px; border-bottom-color: transparent; border-right-color: transparent; }

/* Bubble content */
.itb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.itb-title { font-size: 12px; font-weight: 600; color: var(--md-on-surface); }
.info-tip-bubble code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--md-on-surface);
  background: var(--md-surface-container);
  padding: 0 4px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.info-tip-bubble code.itb-param { color: var(--md-primary); background: var(--md-primary-tint-weak); padding: 1px 6px; border-radius: 6px; }
.itb-body { color: var(--md-on-surface-variant); }
.itb-values {
  display: grid;
  grid-template-columns: fit-content(46%) 1fr;
  gap: 4px 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--md-outline-variant);
}
.itb-values dd { color: var(--md-on-surface-variant); }
.itb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--md-on-surface-variant);
}
.itb-meta b { font-weight: 600; color: var(--md-on-surface); }
.itb-tip {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--md-primary-tint-weak);
  border-left: 2px solid var(--md-primary);
  color: var(--md-on-surface);
}