/* ============================================================ the perk tooltip, shared ==
   The floating node and the affordance on whatever opens it, moved out of
   legendary-ratings.css so the staff page and the designer can use the same
   engine without a second copy of its styles. Loaded by every page that loads
   legendary-tip.js.

   What did NOT move: the Hall's own chip colours, .hl-perks li.has-tip with its
   border and hover wash, which are that card's styling rather than the
   tooltip's and stay where they were. This set was approved on the condition
   that the Hall's tips behave and look exactly as before, and leaving its
   chip rules untouched is most of how that is kept true. */

.hl-tip {
  position: fixed; z-index: 5200; max-width: 300px; padding: 0.5rem 0.65rem;
  border-radius: 10px; border: 1px solid var(--rk-accent-line, rgba(255, 255, 255, 0.18));
  background: linear-gradient(180deg, #232733, #171a22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  color: var(--text, #e8ecf5); font-size: 0.8rem; font-style: normal; line-height: 1.45;
  pointer-events: none;
  /* The Hall's tips are one sentence and unaffected. A submitted design's tip is
     the perk's name, what it does, and the live range on its own line, written
     with newlines rather than markup, which is what this honours. */
  white-space: pre-line;
}
.hl-tip[hidden] { display: none; }

/* Read by a screen reader instead of the tooltip, which it cannot open. */
.hl-perk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* The affordance, generic, for the surfaces that had no tooltip before. The Hall
   keeps its own richer version in legendary-ratings.css and these do not fight
   it: same cursor, and a focus ring where that sheet does not already give one. */
.has-tip { cursor: help; }
.has-tip:focus-visible { outline: 2px solid var(--rk-accent, #e8c37a); outline-offset: 2px; }
/* The name carries the dotted underline that says "there is more here". Marked with
   a class rather than a tag, because the three chip markups disagree about which
   element the name is: the Hall and the staff page use b, Your designs uses span
   with the VALUE in b, so a rule on the tag would underline the wrong half. */
.has-tip .ld-tip-name { text-decoration: underline dotted rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }