/* ============================================================================
 * link-popups.css
 * Custom tippy.js theme for Less Likely. Matches the teal accent in light mode
 * and inverts cleanly for dark mode. Add this to your `css:` list in _quarto.yml.
 * ============================================================================ */

.tippy-box[data-theme~='lesslikely'] {
  background-color: #ffffff;
  color: #1a1a1a;
  border: 1px solid #4895ab;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Serif Pro", Georgia, serif;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.tippy-box[data-theme~='lesslikely'] .tippy-content {
  padding: 0.75rem 1rem;
}

.tippy-box[data-theme~='lesslikely'] strong {
  font-weight: 600;
  color: #2a3f4f;
}

.tippy-box[data-theme~='lesslikely'] em {
  color: #5a6c7a;
  font-size: 0.8125rem;
}

.tippy-box[data-theme~='lesslikely'] img {
  border-radius: 2px;
}

/* Tippy arrow */
.tippy-box[data-theme~='lesslikely'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #4895ab;
}
.tippy-box[data-theme~='lesslikely'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #4895ab;
}
.tippy-box[data-theme~='lesslikely'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #4895ab;
}
.tippy-box[data-theme~='lesslikely'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #4895ab;
}

/* Dark mode inversion */
@media (prefers-color-scheme: dark) {
  .tippy-box[data-theme~='lesslikely'] {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #5aa9bd;
  }
  .tippy-box[data-theme~='lesslikely'] strong {
    color: #ffffff;
  }
  .tippy-box[data-theme~='lesslikely'] em {
    color: #b0b0b0;
  }
}

body.quarto-dark .tippy-box[data-theme~='lesslikely'] {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #5aa9bd;
}
body.quarto-dark .tippy-box[data-theme~='lesslikely'] strong {
  color: #ffffff;
}

/* Loading state */
.tippy-box[data-theme~='lesslikely'] .tippy-content:has-text("Loading") {
  color: #999;
  font-style: italic;
}