/* Cross-reference links and their hover cards. */

.al-wrap { position: relative; display: inline; }
.al-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.al-link:hover { border-bottom-color: var(--primary); }

.al-card {
  position: absolute;
  z-index: 40;
  left: 0;
  top: calc(100% + 8px);
  /* `is-floating` is the card drawn into the body: fixed to the window and
     placed from the link's rectangle, so nothing between the two can clip it.
     Above everything, because it is summoned deliberately and briefly. */
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(340px, 78vw);
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: left;
  /* The card must hold the pointer. It used to be transparent to it, on the
     idea that a hint should never sit between the reader and the link — but
     the card is offset below the link and never covered it, while the pointer
     travelling down to Split view crossed a body it could not enter, so no
     mouseenter fired and the hide timer closed the card on the way. */
  pointer-events: auto;
}

/* Bridges the 8px gap between the link and the card, so crossing it never
   leaves the wrapper at all and the grace period is never needed. */
.al-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 9px;
}
.al-card.is-above::before { top: auto; bottom: -9px; }
.al-card.is-above { top: auto; bottom: calc(100% + 8px); }
.al-card.is-floating { position: fixed; z-index: 1290; width: min(340px, calc(100vw - 16px)); }
.al-card.is-floating.is-above { top: auto; }
.al-card-title { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.al-card-excerpt { color: var(--text-muted); }
.al-card-meta { font-size: 0.75rem; color: var(--text-subtle); }

.al-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.al-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.al-card-action:hover { border-color: var(--primary); color: var(--primary); }
.al-card-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Touch has no hover, so the card arrives on the tap that would have followed
   the link. It is the only route to the article there, so it must be shown. */
@media (hover: none) {
  .al-card { width: min(340px, calc(100vw - 32px)); }
}