/* tooltips.css — per-card "what is this number / is it good or bad" explainers.
   Layered on top of app.js + enhancements.js. An info trigger sits in the
   top-right of every metric card; hover/focus/tap opens a shared popover. */

/* the trigger */
.tip-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-strong, #cfd4da);
  background: #fff;
  color: var(--gray, #6b7480);
  border-radius: 50%;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  z-index: 5;
  transition: color .15s var(--ease, ease), border-color .15s var(--ease, ease), background .15s var(--ease, ease);
}
.tip-btn:hover,
.tip-btn:focus-visible,
.tip-btn[aria-expanded="true"] {
  color: #fff;
  background: var(--cyan, #009be3);
  border-color: var(--cyan, #009be3);
  outline: none;
}
/* give cards room so the trigger never sits on the number */
.has-tip { position: relative; }
.rc-stat.has-tip { padding-right: 34px; }

/* on dark feature bands, invert the trigger */
.rc-team.has-tip .tip-btn,
.mk-apollo.has-tip .tip-btn,
.pod-feat.has-tip .tip-btn,
.au-band.has-tip .tip-btn {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.rc-team.has-tip .tip-btn:hover,
.mk-apollo.has-tip .tip-btn:hover,
.pod-feat.has-tip .tip-btn:hover,
.au-band.has-tip .tip-btn:hover,
.rc-team.has-tip .tip-btn[aria-expanded="true"],
.mk-apollo.has-tip .tip-btn[aria-expanded="true"],
.pod-feat.has-tip .tip-btn[aria-expanded="true"],
.au-band.has-tip .tip-btn[aria-expanded="true"] {
  background: #fff;
  color: var(--navy, #0b204b);
  border-color: #fff;
}

/* the shared popover (one per document, appended to body) */
#card-tip {
  position: fixed;
  z-index: 200;
  width: 288px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 16px 44px rgba(11, 32, 75, .22);
  padding: 15px 17px 16px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .16s var(--ease, ease), transform .16s var(--ease, ease);
}
#card-tip.show { opacity: 1; transform: none; }
#card-tip::before {
  content: '';
  position: absolute;
  left: var(--arrow, 260px);
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1px solid var(--line, #e3e6ea);
  transform: translateX(-50%) rotate(45deg);
}
#card-tip[data-side="below"]::before { top: -6px; border-right: none; border-bottom: none; }
#card-tip[data-side="above"]::before { bottom: -6px; border-left: none; border-top: none; }

.tip-eye {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-soft, #9aa2ad);
}
.tip-metric {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy, #0b204b);
  line-height: 1.3;
}
.tip-what {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink, #0b1220);
  text-wrap: pretty;
}
.tip-read {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray, #6b7480);
}
.tip-verdict {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e3e6ea);
}
.tip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
}
.tip-badge i {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}
.tip-badge.good { background: var(--success, #1f8a4c); }
.tip-badge.bad { background: var(--danger, #c33b3b); }
.tip-badge.watch { background: var(--warning, #c8881a); }
.tip-badge.steady { background: var(--gray, #6b7480); }
.tip-badge.neutral { background: var(--gray-soft, #9aa2ad); }
.tip-delta {
  font-size: 11.5px;
  color: var(--gray, #6b7480);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  #card-tip { transition: none; }
}
@media print {
  .tip-btn, #card-tip { display: none !important; }
}