@layer components {
  /* ── Selection flash (cap reached, ballot locked) ── */
  .selection-flash {
    margin: 0 0 var(--s4);
    padding: var(--s2) var(--s3);
    color: var(--danger-600);
    background: var(--danger-50);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
  }

  /* ── Per-photo pick toggle ── */
  .pick-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s3);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--forest-700);
    background: var(--paper);
    border: 1px solid var(--forest-300);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }

  .pick-btn:hover:not(:disabled) {
    background: var(--forest-50);
    border-color: var(--forest-500);
  }

  .pick-btn.is-picked {
    color: var(--paper);
    background: var(--forest-500);
    border-color: var(--forest-500);
  }

  .pick-btn:disabled {
    opacity: 0.55;
    cursor: default;
  }

  .photo-card__picks {
    display: inline-flex;
    gap: var(--s2);
  }

  /* People's Choice is a distinct, capped pick — give it an amber accent so a
     juror never confuses it with the top-20 toggle. */
  .pick-btn--peoples-choice {
    color: var(--amber-700);
    border-color: var(--amber-300);
  }

  .pick-btn--peoples-choice:hover:not(:disabled) {
    background: var(--amber-50);
    border-color: var(--amber-500);
  }

  .pick-btn--peoples-choice.is-picked {
    color: var(--paper);
    background: var(--amber-500);
    border-color: var(--amber-500);
  }
}