/* ===== VOTER PAGE (phone) ===== */
.voter-view { display: flex; flex: 1; flex-direction: column; gap: var(--space-5); }

/* Every new screen (e.g. the next question in a section) fades up in,
   so moving on reads as a step, not a flash. */
.voter-view > * { animation: view-in var(--t-slow) var(--ease-out) both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

/* Question/role screens: the whole block (question, options, action) is
   vertically centered, the action right under the options — not pinned to
   the bottom of the screen. */
.voter-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

/* A bit more air above the action than between options */
.voter-form__actions { margin-top: var(--space-2); }

/* Waiting / voted / closed states — centered message */
.voter-message {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}

.voter-message__mark {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-2);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xl);
  animation: mark-in var(--t-slow) var(--ease-out);
}

@keyframes mark-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== VOTE STATUS — replaces the Send button once the vote lands ===== */
.vote-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-sizing: border-box;
  padding: var(--space-4) var(--space-5);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
}

.vote-status__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.vote-status__text { color: color-mix(in srgb, var(--color-bg) 75%, transparent); }

/* Waiting dots — each fades in turn */
.vote-status__dots span { animation: dot-wave 1.4s infinite both; }

.vote-status__dots span:nth-child(2) { animation-delay: 0.2s; }

.vote-status__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-wave {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* .is-morphing — grows out of the Send button: starts at the button's
   height, color and pill radius (--from-h, set in JS), ends at the card's
   own. The text fades in once there's room for it. */
.vote-status.is-morphing {
  overflow: hidden;
  animation: status-morph 550ms var(--ease-out) both;
}

.vote-status.is-morphing > * { animation: status-text-in 350ms var(--ease-out) 220ms both; }

@keyframes status-morph {
  from {
    height: var(--from-h);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
  }
  to { height: var(--to-h); }
}

@keyframes status-text-in {
  from { opacity: 0; transform: translateY(0.25rem); }
}