/* Quote swarm — collaborative edit surface under “Here are a few:” */

.quote-swarm {
  --qs-ink: var(--frgd, #3a4237);
  --qs-paper: color-mix(in srgb, var(--accent, #f8fff0) 55%, #fff);
  --qs-line: color-mix(in srgb, var(--border, #baf1a9) 70%, #c8c4d8);
  --qs-colour: #A0C4FF;
  position: relative;
  width: 100%;
  max-width: 42rem;
  margin: 1.25rem auto 2rem;
  /* Fixed footprint: text block + cursor apron underneath (cursors never cover copy). */
  min-height: 11.5rem;
  padding-bottom: 2.75rem;
  box-sizing: border-box;
}

.quote-swarm[hidden] {
  display: none !important;
}

.quote-swarm__surface {
  position: relative;
  z-index: 2;
  padding: 1rem 1.15rem 2.1rem;
  min-height: 7.25rem;
  height: 7.25rem;
  box-sizing: border-box;
  background:
    var(--qs-paper),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      color-mix(in srgb, var(--qs-line) 35%, transparent) 28px
    );
  border: 1.5px solid var(--qs-line);
  border-radius: 2px 14px 10px 12px;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    3px 4px 0 color-mix(in srgb, var(--action, #fcf7a7) 45%, transparent);
  overflow: visible;
}

.quote-swarm__live {
  position: relative;
  z-index: 2;
  margin: 0;
  /* Match .singlerecomendation / .recommendation below. */
  font-family: var(--font-text);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--qs-ink);
  height: 3.75em;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.quote-swarm__live.is-in {
  opacity: 1;
  transform: translateY(0);
}

.quote-swarm__live.is-fade {
  opacity: 0.2;
  transform: translateY(2px);
}

.quote-swarm__mark {
  background: var(--qs-colour);
  color: #050038;
  padding: 0.05em 0.12em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.quote-swarm__click {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--qs-colour) 45%, #fff);
  background: color-mix(in srgb, var(--qs-colour) 55%, #fff);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
}

.quote-swarm__click.is-on {
  animation: quote-swarm-click 380ms ease-out forwards;
}

@keyframes quote-swarm-click {
  0% {
    opacity: 0.95;
    transform: scale(0.35);
  }
  70% {
    opacity: 0.35;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

.quote-swarm__attr {
  position: absolute;
  left: 0.85rem;
  bottom: 0.45rem;
  z-index: 2;
  font-family: var(--font-meta, 'Departure Mono', ui-monospace, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--qs-ink) 55%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease, color 200ms ease;
  pointer-events: none;
}

.quote-swarm__attr.is-on {
  opacity: 1;
  transform: translateY(0);
}

.quote-swarm__attr::before {
  content: '— ';
}

.quote-swarm__heart {
  position: absolute;
  right: 0.7rem;
  bottom: 0.4rem;
  z-index: 3;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e25563;
  pointer-events: none;
  line-height: 0;
}

.quote-swarm__heart-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  transition: fill 180ms ease, opacity 180ms ease;
}

.quote-swarm__heart.is-liked .quote-swarm__heart-icon {
  fill: #ff6b76;
}

.quote-swarm__heart-float {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  margin: 0;
  color: #ff6b76;
  pointer-events: none;
  animation: quote-swarm-heart-rise 900ms ease-out forwards;
}

.quote-swarm__heart-float svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: #e25563;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

@keyframes quote-swarm-heart-rise {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 42px)) scale(1.15);
  }
}

.quote-swarm__cursors {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.quote-swarm__cursor {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 520ms ease;
  will-change: transform, opacity;
}

.quote-swarm__cursor.is-in {
  opacity: 1;
}

.quote-swarm__cursor.is-out {
  opacity: 0;
  transition: opacity 480ms ease;
}

/* Arrow sized and shadowed like the board's agents (.rgc-collab svg). */
.quote-swarm__pointer {
  display: block;
  width: 22px;
  height: 22px;
  margin: -2.94px 0 0 -5.04px;
  overflow: visible;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.28));
}

.quote-swarm__avatar {
  --rec-count: 116;
  --rec-display: 26px;
  position: absolute;
  left: 11px;
  top: 15px;
  display: block;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.22);
  width: var(--rec-display);
  height: var(--rec-display);
  border-radius: 50%;
  background-image: url('../images/recommendation-profiles-sprite.webp');
  background-repeat: no-repeat;
  background-size: calc(var(--rec-count) * var(--rec-display)) var(--rec-display);
  background-position: calc(var(--rec-i, 0) * -1 * var(--rec-display)) 0;
}

.quote-swarm.is-static .quote-swarm__cursors {
  display: none;
}

.quote-swarm.is-static .quote-swarm__live {
  opacity: 1;
  transform: none;
}

.quote-swarm.is-static .quote-swarm__click {
  display: none !important;
}

/* Most quotes take all three lines here, and at 7rem the last one sat 3px
   above the attribution. The surface is 0.75rem taller (the swarm with it, so
   the cursor apron underneath keeps its depth). */
@media (max-width: 640px) {
  .quote-swarm {
    max-width: none;
    margin: 1rem auto 1.5rem;
    min-height: 11.75rem;
    padding-bottom: 2.5rem;
  }

  .quote-swarm__surface {
    padding: 0.9rem 1rem 1.2rem;
    min-height: 7.75rem;
    height: 7.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-swarm__live {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .quote-swarm__click {
    animation: none;
  }

  .quote-swarm__cursor {
    transition: opacity 200ms ease;
  }
}