/* voting module styles — member bar + per-card vote controls. */

/* per-vote-type colors, tuned to the Hanji & Celadon palette */
:root {
  --vote-want: #2f6b5e;   /* celadon jade  */
  --vote-maybe: #b88a2e;  /* dancheong ochre */
  --vote-skip: #9a9384;   /* faded ink     */
}

/* ============================ member bar ================================== */
.member-join {
  display: flex;
  align-items: center;
  gap: 6px;
}
.member-input {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  padding: 7px 13px;
  width: 130px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.member-input::placeholder { color: var(--muted); }
.member-input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: var(--ring);
}
.member-join-btn {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fbf7ee;
  box-shadow: var(--shadow-sm);
  transition: filter .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.member-join-btn:hover { filter: brightness(1.07); box-shadow: var(--shadow); }
.member-join-btn:active { transform: translateY(1px); }
.member-join-btn:disabled { opacity: .6; cursor: progress; filter: none; }

.member-id {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 11px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.member-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--line);
}
.member-name {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .01em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-switch {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.member-switch:hover {
  color: var(--accent-strong);
  border-color: var(--accent-2);
  background: var(--accent-wash);
}

@media (max-width: 680px) {
  .member-input { width: 118px; }
}

/* ============================ vote controls =============================== */
.vote-controls {
  margin-top: 4px;
}
.vote-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-2);
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), box-shadow .16s var(--ease), transform .1s var(--ease);
}
.vote-btn:hover { border-color: var(--muted); }
.vote-btn:active { transform: scale(.97); }
.vote-label { white-space: nowrap; }
.vote-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bg-2);
  color: var(--muted);
}
.vote-count[hidden] { display: none; }

/* active state — colored per vote type */
.vote-btn.active {
  color: #fbf7ee;
  border-color: transparent;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.vote-btn.active .vote-count {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}
.vote-btn.vote-want.active  { background: linear-gradient(150deg, var(--accent-2), var(--vote-want)); }
.vote-btn.vote-maybe.active { background: linear-gradient(150deg, #cc9b3d, var(--vote-maybe)); }
.vote-btn.vote-skip.active  { background: linear-gradient(150deg, #a8a191, var(--vote-skip)); }

/* tinted hover on inactive buttons hints at each option's color */
.vote-btn.vote-want:hover:not(.active)  { border-color: var(--vote-want);  color: var(--vote-want); }
.vote-btn.vote-maybe:hover:not(.active) { border-color: var(--vote-maybe); color: var(--vote-maybe); }
.vote-btn.vote-skip:hover:not(.active)  { border-color: var(--vote-skip);  color: var(--ink-2); }

.vote-hint {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--warm);
  animation: hint-in .2s var(--ease);
}
.vote-hint[hidden] { display: none; }
@keyframes hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}