/* ============================================================
   votes.css - Reddit-style vote buttons (up arrow, net score, down
   arrow) shared by review and work cards, plus the captcha popover
   used to confirm a vote.
   ============================================================ */

/* Vote row: the shared layout of the three parts. Cards pin it to
   their bottom via page-specific rules (see works.css). */
.vote-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: #aab2c0;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.vote-btn:hover {
  border-color: var(--accent);
  color: #fff;
}

/* Active (own vote) state: accent for up, blue for down. */
.vote-btn--active.vote-btn--up {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
}

.vote-btn--active.vote-btn--down {
  background: #6b8fdd;
  border-color: #6b8fdd;
  color: #fff;
}

.vote-btn__arrow {
  display: inline-block;
  font-size: 11px;
  transition: transform 0.15s ease;
}

/* Press feedback: the arrow squashes while the button is held. */
.vote-btn:active .vote-btn__arrow {
  transform: scale(0.8);
}

/* Bounce when the vote is registered (class added by JS). */
.vote-btn--pop .vote-btn__arrow {
  animation: vote-bounce 0.35s ease;
}

@keyframes vote-bounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.6) translateY(-2px);
  }
  100% {
    transform: scale(1);
  }
}

/* Net score between the arrows. */
.vote-score {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #aab2c0;
  transition: color 0.2s;
}

/* Score pop when it changes (class added by JS). */
.vote-score--pop {
  animation: score-pop 0.35s ease;
}

@keyframes score-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.vote-score--up {
  color: var(--accent);
}

.vote-score--down {
  color: #6b8fdd;
}

/* ----- Vote popover -----
   Non-modal panel with its own slider captcha shown next to the
   clicked arrow; confirmed votes POST /api/<kind>/<id>/vote. */

.vote-popover {
  position: fixed;
  z-index: 260;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  animation: vote-popover-in 0.2s ease-out;
}

.vote-popover__text {
  color: #fff;
  font-size: 13px;
  margin-bottom: 12px;
  text-align: center;
}

@keyframes vote-popover-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}