/* Emma Percolating — ideas board. Inherits the Emma, Interrupted design tokens. */

.ei-perc { margin: 2.5rem 0 4rem; }

.ei-perc-shelf { margin-bottom: 3.5rem; }
.ei-perc-shelf:last-child { margin-bottom: 0; }

.ei-perc-shelf-title {
  font-family: var(--ei-font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin: 0.5rem 0 0.35rem;
  color: var(--ei-fg);
}

.ei-perc-shelf-blurb {
  color: var(--ei-muted-fg);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
  max-width: 40rem;
}

.ei-perc-list {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .ei-perc-list { grid-template-columns: 1fr 1fr; }
}

.ei-perc-card {
  border: 1px solid var(--ei-border);
  border-radius: 0.9rem;
  padding: 1.4rem 1.4rem 1.15rem;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ei-perc-card:hover { border-color: var(--ei-primary); }

.ei-perc-card-title {
  font-family: var(--ei-font-heading);
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  color: var(--ei-fg);
}

.ei-perc-card-desc {
  color: var(--ei-muted-fg);
  font-size: 0.92rem;
  line-height: 1.65;
  flex: 1;
}
.ei-perc-card-desc p { margin: 0 0 0.75em; }
.ei-perc-card-desc p:last-child { margin-bottom: 0; }

.ei-perc-foot { margin-top: 1.1rem; }

.ei-perc-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ei-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--ei-border);
  background: transparent;
  color: var(--ei-fg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.ei-perc-vote:hover:not(:disabled) {
  border-color: var(--ei-primary);
  color: var(--ei-primary);
}
.ei-perc-vote:active:not(:disabled) { transform: scale(0.96); }
.ei-perc-vote:disabled { cursor: default; }

.ei-perc-vote.is-voted {
  background: var(--ei-primary);
  border-color: var(--ei-primary);
  color: #1d1b16;
}
.ei-perc-vote.is-voted:hover { color: #1d1b16; }

.ei-perc-count { font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
.ei-perc-vote-label { font-weight: 400; opacity: 0.75; }

.ei-perc-empty {
  color: var(--ei-muted-fg);
  font-style: italic;
  border: 1px dashed var(--ei-border);
  border-radius: 0.9rem;
  padding: 1.5rem;
}