/* src/attr-tooltip.css
 * ATTR-TOOLTIP-01 (#4145) + BUG FIX
 *
 * .attr-tt is position:fixed in document.body — NOT nested inside a
 * panel container. This escapes overflow:hidden on #char-panel (z-index:150)
 * and #char-body which clipped the tooltip when it was position:absolute
 * inside #char-v2-tab-attributes (which has no CSS position property).
 *
 * bottom, left, width are set programmatically by _positionIn(containerEl)
 * in src/attr-tooltip.js using containerEl.getBoundingClientRect().
 *
 * z-index: 9999 — above #char-panel (z-index:150) and all other panels.
 *
 * WCAG 1.4.13: pointer-events:auto on --visible so cursor can move
 * from the trigger row onto the tooltip without dismissing it.
 */

.attr-tt {
  position: fixed;
  /* bottom, left, width are set by JS — do not set here */
  background: rgba(4, 5, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  padding: 11px 13px 10px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.72);
  overflow: hidden;
  min-width: 160px;
  max-width: 380px;
}

/* WCAG 1.4.13 hoverable — allow cursor to move from row to tooltip */
.attr-tt--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Header row: icon + coloured name + pts count */
.attr-tt__head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.attr-tt__icon {
  font-size: 14px;
  line-height: 1;
}

.attr-tt__name {
  flex: 1;
}

.attr-tt__cur {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.45;
  text-transform: none;
  letter-spacing: 0;
}

/* One-sentence description */
.attr-tt__desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

/* Resolved contribution: "→ +24 DMG · +90kg carry" */
.attr-tt__contrib {
  font-size: 10px;
  /* 0.55 keeps it subordinate while meeting WCAG AA contrast for supplementary text */
  color: rgba(255, 255, 255, 0.55);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Next-point preview: "▸ +8 DMG · +30 carry weight" */
.attr-tt__next {
  font-size: 10px;
  color: #22c55e;
  margin-top: 3px;
}