/* badges.css - auto badges (New, tags) and link-type icons.
   Token-only, dark-theme, RTL-correct via logical properties. Icons are themeable
   masks (background-color: currentColor) so they inherit text colour. Mask/background
   data: URIs fall under img-src 'self' data: in the site CSP. */

/* ---- badge container: overlays the top inline-end corner of a positioned card ---- */
.fa-badges {
  position: absolute;
  inset-block-start: var(--space-2, 0.5rem);
  inset-inline-end: var(--space-2, 0.5rem);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  z-index: 3;
  pointer-events: none;
}

/* inline badge row (when not overlaying a card, e.g. inside a heading) */
.fa-badges--inline {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: var(--space-2, 0.5rem);
}

.fa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: 0.1rem var(--space-2, 0.5rem);
  font-family: var(--font-sans, inherit);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full, 999px);
  white-space: nowrap;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.3));
}

/* "New" - accent fill for prominence */
.fa-badge-new {
  color: var(--color-bg, #0b0b0c);
  background: var(--color-accent, #e8b339);
}

/* tag chip - quiet, surface-raised with border */
.fa-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem var(--space-2, 0.5rem);
  font-family: var(--font-sans, inherit);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-dim, #b8b8bf);
  background: var(--color-surface-raised, #1b1b1f);
  border: 1px solid var(--color-border, #2c2c31);
  border-radius: var(--radius-sm, 6px);
}

/* ---- link-type icons: appended after the link text, themeable mask ---- */
.fa-ico-ext::after,
.fa-ico-pdf::after,
.fa-ico-video::after,
.fa-ico-mail::after {
  content: "";
  display: inline-block;
  inline-size: 0.85em;
  block-size: 0.85em;
  margin-inline-start: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* external (up-right arrow in a box) */
.fa-ico-ext::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
}
/* document / pdf */
.fa-ico-pdf::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}
/* video / play */
.fa-ico-video::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
/* email */
.fa-ico-mail::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .fa-badge, .fa-tag { transition: none; }
}