/* Lock and Lay — the gene tooltip (#1394, js/genetip.js): a small dark tip on either theme, just the genes as text. A
   line for the genes that show (white), one for the 100% hets in shorthand (purple: "TH Albino Pied Clown"), one for
   the possible hets with their odds (grey). An arrow points
   at what you hovered. */
.gtp { --gtp-bg: #24211d; --gtp-bg2: #1b1916; --gtp-line: #3d382f; --gtp-txt2: #b9af9d;
  position: fixed; z-index: 95; left: 0; top: 0; width: max-content; max-width: 300px; border: 1px solid #000; border-radius: 10px;
  background: linear-gradient(180deg, var(--gtp-bg), var(--gtp-bg2)); color: #f4eddf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 0 #0b0a09, 0 14px 32px rgba(0, 0, 0, .45);
  pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .14s ease; }
.gtp.up { transform: translateY(-3px); }
.gtp.on { opacity: 1; transform: none; }
.gtp::before { content: ''; position: absolute; left: calc(var(--ax, 30px) - 6px); top: -7px; width: 12px; height: 7px; background: var(--gtp-bg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gtp.up::before { top: auto; bottom: -7px; background: var(--gtp-bg2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gtp-card { padding: 8px 11px; }
.gtp-card + .gtp-card { border-top: 1px solid var(--gtp-line); }
.gtx-name { display: block; margin-bottom: 2px; font: 700 12px/1.3 var(--sans); color: var(--gtp-txt2); }
.gtx-vis { font: 700 13.5px/1.35 var(--sans); color: #fff; }
.gtx-het { font: 700 13px/1.35 var(--sans); color: #dcc0f2; }
.gtx-poss { font: 600 12.5px/1.35 var(--sans); color: var(--gtp-txt2); }
/* what you can hover shows it can be hovered */
[data-genetip] { cursor: help; }