/* Tooltip: the game tooltip skinned flat like an addon (docs/brand/components.md, Tooltip).
   One node per page, created by tooltip.js. Name in the page accent, description in Classic
   yellow, the state line in the game's own green or orange, and the dated correction line
   after a pip. The 120ms fade is the only motion. */

.wfg-tip {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: .5rem .65rem .55rem;
  border: 1px solid var(--edge);
  background: var(--tip-ground);
  box-shadow: var(--shadow-inner);
  font: 400 .86rem/1.4 var(--font-ui);
  color: var(--ink);
  opacity: 0;
  transition: opacity .12s ease;
}
.wfg-tip.is-on { opacity: 1; }
.wfg-tip[hidden] { display: none; }
.wfg-tip p { margin: 0; }
.wfg-tip .tip-name { font-size: 1rem; color: var(--accent-text); }
.wfg-tip .tip-kind { font-size: .78rem; color: var(--tip-muted); }
.wfg-tip .tip-rank { margin-top: .35rem; }
.wfg-tip .tip-desc { color: var(--classic-yellow); }
.wfg-tip .tip-next { margin-top: .4rem; }
.wfg-tip .tip-status { margin-top: .45rem; color: var(--unchanged-text); }
.wfg-tip .tip-status.is-new { color: var(--classic-green); }
.wfg-tip .tip-status.is-reworked { color: var(--reworked); }
.wfg-tip .tip-note { margin-top: .35rem; font-size: .78rem; color: var(--tip-muted); }
.wfg-tip .tip-errata { display: flex; gap: .4rem; margin-top: .45rem; font-size: .8rem; color: var(--ink); }
.wfg-tip .tip-errata::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .35em; border-radius: 50%; background: var(--evidence-confirmed); }

@media (prefers-reduced-motion: reduce) {
  .wfg-tip { transition: none; }
}

@media (forced-colors: active) {
  .wfg-tip { border-color: CanvasText; }
}