/* shared hover card */
.tip {
  position: fixed;
  z-index: 80;
  width: var(--tip-w);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-raised-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}
.tip.show { display: flex; }
.tip-head { display: flex; flex-direction: column; gap: 3px; }
.tip-title { font: 600 13px/1.2 var(--font-ui); }
.tip-sub { font: 500 12px/1.3 var(--font-ui); }
.tip-kv { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 14px; row-gap: 5px; }
.tip-k { font: 400 12px/1.2 var(--font-ui); color: var(--text-2); }
.tip-v { font: 600 11px/1.2 var(--font-mono); text-align: right; }
.tip-notes, .tip-list, .tip-lines { display: flex; flex-direction: column; gap: 7px; }
.tip-list, .tip-lines { gap: 5px; }
.tip-note { display: flex; gap: 7px; align-items: flex-start; }
.tip-note-chip { flex: none; margin-top: 1px; height: 13px; min-width: 15px; padding: 0 3px; border-radius: var(--radius-sm); display: grid; place-items: center; font: 700 9px/1 var(--font-mono); color: var(--bg-app); }
.tip-note-text { font: 400 12px/1.35 var(--font-ui); text-wrap: pretty; }
.tip-list-title { font: 600 10px/1 var(--font-display); letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--text-3); }
.tip-row { display: flex; align-items: center; gap: var(--space-4); }
.tip-row .pic { flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); }
.tip-row .pic.round { border-radius: 50%; }
.tip-row-name { flex: 1; min-width: 0; font: 500 12px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a text-only row (the breakdown's smaller effects) is a sentence, so it wraps instead of cutting itself off */
.tip-row:not(:has(.pic)) { align-items: flex-start; }
.tip-row:not(:has(.pic)) .tip-row-name { white-space: normal; text-wrap: pretty; }
.tip-row-val { flex: none; font: 600 11px/1 var(--font-mono); }
.tip-line { font: 400 12px/1.35 var(--font-ui); text-wrap: pretty; }
.tip-foot { font: 400 11px/1.3 var(--font-ui); color: var(--text-3); }