/* 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(--tip-edge, 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; }
/* The caret: a small square turned 45 degrees at the trigger's center (--tip-x, set by
   tooltip.js), on the edge that faces the trigger. */
.wfg-tip::before { content: ""; position: absolute; left: var(--tip-x, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: var(--tip-ground); border: solid var(--tip-edge, var(--edge)); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.wfg-tip.is-below::before { top: -5px; bottom: auto; border-width: 1px 0 0 1px; }
.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; }
/* A client-read ability's header rows, laid out like the game tooltip: cost left and range
   right, then cast time left and cooldown right. */
.wfg-tip .tip-meta { display: flex; justify-content: space-between; gap: 1rem; }
.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(--correction); }

/* Item, quest and NPC tooltips (scripts/lib/core/entity-links.mjs): the name in the item's
   quality color, then the game tooltip's lines in order, each in the game's color for it
   (item level and flavor text yellow, Equip and Use lines green), two-column rows (slot and
   armor type, damage and speed) split left and right, and the source line last. */
.wfg-tip .tip-name.tip-q0 { color: var(--q0); }
.wfg-tip .tip-name.tip-q1 { color: var(--q1); }
.wfg-tip .tip-name.tip-q2 { color: var(--q2); }
.wfg-tip .tip-name.tip-q3 { color: var(--q3); }
.wfg-tip .tip-name.tip-q4 { color: var(--q4); }
.wfg-tip .tip-name.tip-q5 { color: var(--q5); }
.wfg-tip .tip-name.tip-q6 { color: var(--q6); }
.wfg-tip .tip-name.tip-q7 { color: var(--q7); }
.wfg-tip .tip-line, .wfg-tip .tip-meta { color: var(--ink); }
.wfg-tip .tip-y { color: var(--classic-yellow); }
.wfg-tip .tip-q0 { color: var(--q0); }
.wfg-tip .tip-q2 { color: var(--q2); }
.wfg-tip .tip-q3 { color: var(--q3); }
.wfg-tip .tip-q4 { color: var(--q4); }
.wfg-tip .tip-q5 { color: var(--q5); }
.wfg-tip .tip-reagent { color: var(--tip-reagent); }
.wfg-tip .tip-muted { color: var(--tip-muted); }
.wfg-tip .tip-name + .tip-line, .wfg-tip .tip-kind + .tip-line { margin-top: .1rem; }
/* An item's icon, top left; the name and first lines run beside it. */
.wfg-tip .tip-icon { float: left; width: 36px; height: 36px; margin: .1rem .5rem .2rem 0; border: 1px solid var(--line-strong); border-radius: 3px; }

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

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

/* EvidenceMark tooltips (scripts/lib/components/evidence.mjs): the tier's icon, its word and
   what it means, then the source links and the dataset, build or date line. The icon repeats
   the one the reader pointed at, so the tooltip teaches what it means. */
.wfg-tip:has(.tip-ev, .tip-cite) { --tip-edge: var(--line-strong); }
.wfg-tip .tip-ev, .wfg-cite-tip .tip-ev { display: flex; align-items: flex-start; gap: .4rem; font-size: .86rem; color: var(--tip-muted); }
.wfg-tip .tip-ev .wfg-ev-icon, .wfg-cite-tip .tip-ev .wfg-ev-icon { flex: none; width: .95rem; height: .95rem; margin-top: .12rem; color: var(--ev); }
.wfg-tip .tip-ev b, .wfg-cite-tip .tip-ev b { font-weight: 400; color: var(--ink); }
.wfg-tip .tip-src { margin-top: .3rem; line-height: 1.5; }
.wfg-tip .tip-src a { color: var(--accent-text); text-underline-offset: 2px; }
.wfg-tip .tip-note { margin-top: .3rem; font-size: .8rem; color: var(--tip-muted); }

/* InlineCite tooltips (scripts/lib/components/cite.mjs): the tier line or a label when the
   writer gave one, then the citation as written, its link and checked date included. The
   lines are spans, since the citation's own copy sits inside a paragraph. */
.wfg-tip .tip-label, .wfg-tip .tip-cite, .wfg-cite-tip .tip-label, .wfg-cite-tip .tip-cite { display: block; }
.wfg-tip .tip-label, .wfg-cite-tip .tip-label { color: var(--ink); }
.wfg-tip .tip-cite, .wfg-cite-tip .tip-cite { margin-top: .3rem; color: var(--tip-muted); }
.wfg-tip .tip-cite:first-child, .wfg-cite-tip .tip-cite:first-child { margin-top: 0; }
.wfg-tip .tip-cite a, .wfg-cite-tip .tip-cite a { color: var(--accent-text); text-underline-offset: 2px; }

/* Without JavaScript a citation's button opens its <small popover> natively (tooltip.js
   removes the popovertarget otherwise). The browser centers it; it wears the tooltip's
   frame. Browsers without the popover attribute keep it hidden, and the button's name and
   title still give the source and date. */
.wfg-cite-tip { display: none; }
.wfg-cite-tip:popover-open {
  display: block;
  max-width: min(20rem, calc(100vw - 2rem));
  margin: auto;
  padding: .5rem .65rem .55rem;
  border: 1px solid var(--line-strong);
  background: var(--tip-ground);
  box-shadow: var(--shadow-inner);
  font: 400 .86rem/1.4 var(--font-ui);
  color: var(--ink);
}
@media (forced-colors: active) {
  .wfg-cite-tip:popover-open { border-color: CanvasText; }
}