/* ============================================================================
   hover-card.css — the shadcn/ui (Base UI) Hover Card, in the site's own
   vocabulary. The reference look is `w-64 rounded-md border bg-popover p-4
   shadow-md`: 256px, 16px padding, 1px border, a popover ground and a medium
   shadow. Mapped to the detail-card recipe — paper ground, the border token,
   the 12px radius the doors wear, and the store panel's elevation — so the
   card reads as the same object family as every other pop-up on the site.

   The card is presentational: it carries no role, it is `hidden` when closed,
   and the sentence inside it reaches a screen reader through aria-describedby
   on the trigger, not through the popup being announced.
   ========================================================================== */

.hover-card {
  position: fixed;
  z-index: 3000;                       /* over the entry overlay (2000), under
                                          the Add Cognia modal (4000) */
  box-sizing: border-box;
  width: var(--hc-width, 256px);
  max-width: calc(100vw - 16px);
  padding: var(--sp-15, 16px);
  border: 1px solid var(--border);
  border-radius: var(--r-12, 12px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-4-panel);
  font-family: var(--font-body);
  font-size: var(--fs-base, 12px);
  line-height: 1.55;
  /* Normally the card is reachable: the pointer can travel onto it and it
     stays open. That only holds while it overlaps nothing. */
  pointer-events: auto;

  /* enter / exit: 150ms fade + scale .95 -> 1 + an 8px slide from the edge the
     card is anchored to. Opacity and transform only. */
  --hc-x: 0px;
  --hc-y: 8px;
  opacity: 0;
  transform: translate(var(--hc-x), var(--hc-y)) scale(.95);
  transform-origin: bottom left;
  transition: opacity .15s cubic-bezier(.23, 1, .32, 1),
              transform .15s cubic-bezier(.23, 1, .32, 1);
}
/* to the left of the trigger: it arrives from its right edge, and back out */
.hover-card[data-side="left"]  { --hc-x: 8px;  --hc-y: 0px; transform-origin: right center; }
.hover-card[data-side="right"] { --hc-x: -8px; --hc-y: 0px; transform-origin: left center; }
.hover-card[data-side="bottom"] { --hc-y: -8px; transform-origin: top left; }
.hover-card[data-side="top"][data-align="center"] { transform-origin: bottom center; }
.hover-card[data-side="bottom"][data-align="center"] { transform-origin: top center; }
.hover-card[data-side="top"][data-align="end"] { transform-origin: bottom right; }
.hover-card[data-side="bottom"][data-align="end"] { transform-origin: top right; }

.hover-card.is-open { opacity: 1; transform: translate(0, 0) scale(1); }

/* The fallback placement (no room beside the trigger — a phone) has to sit on
   top of things, so there it must not take the pointer: the control under it
   keeps its hover, its glow and its tap. Nothing inside the card is
   interactive, so nothing is lost. */
.hover-card[data-fallback] { pointer-events: none; }

.hover-card .hc-text { display: block; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .hover-card { transition: none; }
}