/* The slate: one supporter's people, and the signature flip. Split from styles.css only to keep
   each file under 500 lines. */

/* ---- The slate: a quiet white card listing one supporter's people ---- */

.slate {
  margin-top: 40px;
  padding: 4px 16px 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  /* Square on the rule's side, so the red rule doesn't bend round a corner (review round 3). */
  border-radius: 0 0 4px 4px;
}

.slate-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slate-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.slate-name {
  font-weight: 700;
  line-height: 1.3;
}

/* One width for both states at every size, so the column lines up (review R2-8). */
.status {
  position: relative;
  display: inline-grid;
  margin-left: auto;
  min-width: 7.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  perspective: 400px;
}

.status-face,
.status-voted::after {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
}

.status-voted .status-face {
  color: var(--ink-muted);
}

.check {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Final state: the rows still to call carry the emphasis. An outline, not a fill, so the
   example doesn't look like a button (review round 1, finding 13). */
.status-call .status-face {
  color: var(--navy);
  border: 2px solid var(--navy);
}

.slate-caption {
  margin: 12px 0 0;
  font-size: 1rem;
  color: var(--ink-muted);
}

/* Signature: three rows flip from "Call today" to "Voted"; the two left over get the emphasis.
   Animation only; with no motion the markup's final state shows as is. */
@media (prefers-reduced-motion: no-preference) {
  .status-voted::after {
    content: 'Call today' / '';
    border: 2px solid var(--navy);
    color: var(--navy);
    background: var(--white);
    opacity: 0;
    animation: flip-out 220ms ease-in backwards;
  }

  .status-voted .status-face {
    animation: flip-in 220ms ease-out backwards;
  }

  .flip-1::after { animation-delay: 600ms; }
  .flip-1 .status-face { animation-delay: 820ms; }
  .flip-2::after { animation-delay: 1100ms; }
  .flip-2 .status-face { animation-delay: 1320ms; }
  .flip-3::after { animation-delay: 1600ms; }
  .flip-3 .status-face { animation-delay: 1820ms; }

  .status-call .status-face {
    animation: emphasize 300ms ease-out 2200ms backwards;
  }

  /* With JS, the delays count from when the slate scrolls into view. */
  .js .slate:not(.in-view) *,
  .js .slate:not(.in-view) *::after {
    animation-play-state: paused;
  }
}

@keyframes flip-out {
  from { opacity: 1; transform: rotateX(0); }
  to { opacity: 0; transform: rotateX(90deg); }
}

@keyframes flip-in {
  from { opacity: 0; transform: rotateX(-90deg); }
  to { opacity: 1; transform: rotateX(0); }
}

@keyframes emphasize {
  from { border-color: transparent; }
}

@media (min-width: 768px) {
  .slate {
    padding: 4px 24px 16px;
  }
}

@media (min-width: 1024px) {
  .slate-rows li {
    padding: 7px 0;
  }
}