/* Entity hover-preview popup (LIB-060), extracted from lib_style.css (FE-116).
 *
 * HOSTING CONTRACT -- a page that wants entity previews needs all three of:
 *   1. this stylesheet:  <link rel="stylesheet" href="/app-css/lib_preview_card.css?v=$app_version">
 *   2. the container:    <div id="lib-preview-card" class="lib-preview-card"
 *                             role="status" aria-live="polite" hidden></div>
 *   3. the behavior:     <script src="/app-js/lib_preview_card.js?v=$app_version" defer></script>
 * Adding the container alone does nothing, and neither does adding the script
 * without the container -- init() bails when #lib-preview-card is absent.
 * Do NOT pull in lib_style.css to get these rules: that file also carries
 * Library-wide chrome (broad body/a/.card/.table/navbar rules) and will
 * restyle the host page.
 *
 * Previews only appear on devices matching (hover: hover) and (pointer: fine)
 * -- the host page must be fully usable without the popup ever showing.
 *
 * Live hosts: templates/lib/layout.html (every Library page) and
 * templates/account/monsterbook.html (FE-106, behind MONSTERBOOK_ENABLED).
 * The latter is the non-Library case -- it renders into shared/base.html,
 * which declares no data-bs-theme, so the JS falls back to the mlTheme cookie;
 * the Library forces data-bs-theme="dark" and must win over it. FE-118 deleted
 * the /testing/preview_card scaffold that used to stand in for that case.
 *
 * Chrome is drawn from Bootstrap tokens, and the popup is position:fixed at
 * body level, so it inherits no ancestor theme scope; lib_preview_card.js
 * stamps data-bs-theme on the container at show time. See FE-116 part B.
 */

/* Informational preview placed beside the content block its source link lives
   in, so it never sits over neighboring entity links. When no side has room
   the panel falls back to overlaying its source and the JS adds
   .lib-preview-card--overlay, which restores click pass-through. */
.lib-preview-card {
  position: fixed;
  z-index: 1055;
  width: fit-content;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100vh - 2rem));
  overflow: auto;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--bs-body-bg, #212529);
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.lib-preview-card--overlay {
  pointer-events: none;
}

/* FE-116 part C: the drop shadow above is tuned for the force-dark Library and
   reads as a smudge on a light host page. Scoped to the theme the JS stamps on
   the container, so dark hosts (every Library page) are untouched. */
.lib-preview-card[data-bs-theme="light"] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.lib-preview-card-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.lib-preview-card .min-width-0 {
  min-width: 0;
}

.lib-preview-card-name {
  font-weight: 600;
}

.lib-preview-card-stats li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}