/* HoverTip (js/ui/HoverTip.js): one stage-scaled detail card for every hoverable control,
 * plus two-line wrapping for action buttons so most names read in full without hovering. */

.hover-tip {
  position: absolute; z-index: 100; pointer-events: none;
  width: max-content; max-width: 380px; min-width: 180px;
  padding: 9px 12px 10px; box-sizing: border-box;
  background: linear-gradient(180deg, #FBF6EC 0%, #F1E8D6 100%);
  border: 1px solid var(--ink); border-top: 3px solid var(--accent);
  box-shadow: inset 0 0 0 3px rgba(251, 246, 236, 0.9), inset 0 0 0 4px rgba(169, 123, 44, 0.35), 0 6px 18px rgba(30, 20, 10, 0.32);
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--ink);
  white-space: normal; word-break: break-word; text-align: left;
  animation: hover-tip-in 0.12s ease-out;
}
@keyframes hover-tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.hover-tip-title { font-family: var(--font-title); font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.hover-tip-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-top: 1px; }
.hover-tip-body { margin-top: 5px; color: #4A433C; white-space: pre-line; }
.hover-tip-title + .hover-tip-body, .hover-tip-sub + .hover-tip-body { padding-top: 5px; border-top: 1px dashed rgba(30, 28, 26, 0.25); }

.hover-tip-rows { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.hover-tip-row { display: flex; gap: 10px; }
.hover-tip-key { flex: 0 0 auto; min-width: 48px; font-weight: 700; color: var(--accent-deep); }
.hover-tip-val { flex: 1 1 auto; color: #3E3832; }

.hover-tip-sec {
  margin-top: 7px; padding-top: 5px; border-top: 1px solid rgba(169, 123, 44, 0.45);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-deep);
}
.hover-tip-fx { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.hover-tip-fx-item { position: relative; padding-left: 13px; }
.hover-tip-fx-item::before { content: "▪"; position: absolute; left: 0; color: rgba(107, 68, 40, 0.6); font-size: 11px; }
.hover-tip-fx-item.dir-up::before { content: "▲"; color: var(--green); font-size: 9px; top: 3px; }
.hover-tip-fx-item.dir-down::before { content: "▼"; color: var(--red); font-size: 9px; top: 3px; }

.hover-tip-status {
  margin-top: 7px; padding: 3px 7px; font-size: 12.5px; font-weight: 700;
  border: 1px solid currentColor;
}
.hover-tip-status.is-ok { color: var(--green); background: rgba(59, 107, 54, 0.07); }
.hover-tip-status.is-locked { color: var(--red); background: rgba(184, 41, 47, 0.06); }

/* Action buttons: wrap to at most two lines instead of a single ellipsis line. The full name,
 * effects and lock reason are always available in the hover card. */
button.btn.d3-action,
button.btn.d-domain-act-btn,
button.btn.region-act-btn {
  white-space: normal; text-overflow: clip; word-break: break-word;
  line-height: 1.35; max-height: calc(2 * 1.35em + 12px); overflow: hidden;
}