/**
 * Temple comments — the article heart.
 *
 * Loaded on every template, so the layout here is palette-neutral except
 * for one thing: the neon itself. That is deliberate. The heart is meant
 * to CONTRAST with the site accent rather than match it — whichever
 * crystal a member picks (green, blue, teal, violet, gold, red), the
 * heart stays magenta and stays findable.
 */
.totjo-heart-bar { display: flex; justify-content: flex-start; margin: 0 0 1.4rem; }

.totjo-heart {
  --totjo-neon: #ff3d9a;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: .75;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: color .16s ease, opacity .16s ease, border-color .16s ease;
}
.totjo-heart:hover:not(:disabled) { opacity: 1; color: var(--totjo-neon); }
.totjo-heart:disabled { cursor: default; opacity: .5; }
.totjo-heart:focus-visible { outline: 2px solid var(--totjo-neon); outline-offset: 2px; }

/* Unhearted: an outline. Hearted: filled, and lit. */
.totjo-heart__icon { fill: none; stroke: currentColor; stroke-width: 1.7; }
.totjo-heart.is-on { opacity: 1; color: var(--totjo-neon); border-color: var(--totjo-neon); }
.totjo-heart.is-on .totjo-heart__icon {
  fill: var(--totjo-neon);
  stroke: var(--totjo-neon);
  /* drop-shadow traces the path's alpha, so the halo is heart-shaped
     rather than a glowing rectangle behind it. */
  filter:
    drop-shadow(0 0 3px var(--totjo-neon))
    drop-shadow(0 0 9px color-mix(in oklab, var(--totjo-neon) 55%, transparent));
}

.totjo-heart__n { font-variant-numeric: tabular-nums; font-weight: 700; }
.totjo-heart__label {
  font-size: .78rem;
  letter-spacing: .04em;
  opacity: .8;
}

/* The pop on giving one. transform only — it runs on the compositor and
   never asks the browser to recompute a blur mid-animation. */
@keyframes totjo-heart-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.3); }
  68%  { transform: scale(.93); }
  100% { transform: scale(1); }
}
.totjo-heart.just-hearted .totjo-heart__icon { animation: totjo-heart-pop .42s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .totjo-heart.just-hearted .totjo-heart__icon { animation: none; }
}