/* Deep-dive corner tag \u2014 shared sitewide convention.
   Any tile whose data has a `deepDive` field renders a small <span class="card-dd">
   tucked in the top-right corner, signalling richer deep-dive content.
   Tinted to the tile's accent via inline color/background/borderColor.
   Dark-mode tweaks live in dark.css. This is the standard for ALL current and
   future deep-dive tiles (supplements, foods, and beyond). */
.card.has-dd, .fg-card.has-dd { position: relative; }
.card-dd{
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:.26rem .55rem;
  border:1px solid currentColor;   /* overridden inline with accent + alpha */
  border-radius:50px;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;             /* purely decorative; the whole tile is the button */
  backdrop-filter:blur(2px);
}
.card-dd-ic{ font-size:.72rem; }

/* nudge the evidence/stars row so the tag never overlaps it on narrow tiles */
.card.has-dd .card-ev{ margin-top:1.1rem; }
/* food cards: the ev-dots sit top-right of fg-card-top, where the corner tag lands.
   Nudge ONLY the dots down within the row (the 2rem icon holds the row height), so the
   tag clears them WITHOUT pushing the category/title below out of alignment with other
   cards in the row. Mirrors how the supplement card nudges only .card-ev. */
.fg-card.has-dd .fg-card-top{ align-items:flex-start; }
.fg-card.has-dd .fg-ev{ margin-top:1.5rem; }

@media(max-width:480px){
  .card-dd{ font-size:.54rem; padding:.22rem .48rem; top:.55rem; right:.55rem; }
}