/* glass.css — A2 glass-morphism cards (SPEC §17 — locked YES P0).
 * Frosted blur over a translucent indigo wash on the base canvas.
 */

.vc-card {
  position: relative;
  display: block;
  padding: 16px;
  background: var(--vc-bg-glass);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  backdrop-filter: var(--vc-blur);
  -webkit-backdrop-filter: var(--vc-blur);
  box-shadow: var(--vc-shadow-sm);
  color: var(--vc-text-high);
}

.vc-card--elevated {
  background: var(--vc-bg-elevated);
  box-shadow: var(--vc-shadow);
}

.vc-card--interactive {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.vc-card--interactive:hover {
  border-color: var(--vc-primary);
  box-shadow: var(--vc-shadow);
  transform: translateY(-1px);
}
.vc-card--interactive:active { transform: translateY(0); }

.vc-card__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--vc-text-high);
}
.vc-card__sub {
  font-size: 13px;
  color: var(--vc-text-muted);
}
.vc-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* A3 — skeleton loaders. Subtle shimmer over surface to signal pending data. */

.vc-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--vc-bg-surface) 0%,
    var(--vc-bg-elevated) 50%,
    var(--vc-bg-surface) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--vc-radius-sm);
  animation: vc-shimmer 1.4s linear infinite;
}
.vc-skeleton--line  { height: 14px; margin: 6px 0; }
.vc-skeleton--title { height: 22px; width: 60%; margin: 4px 0 10px; }
.vc-skeleton--card  { height: 88px; margin: 10px 0; }

@keyframes vc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-skeleton { animation-duration: 4s; }
  .vc-card--interactive { transition: none; }
  .vc-counter { transition: none; }
}

/* A9 — animated counter. Tabular numerals + gentle slide on update. */
.vc-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  transition: color 200ms ease;
}
.vc-counter--up   { color: var(--vc-success); }
.vc-counter--down { color: var(--vc-danger); }

/* Member roster card — avatar circle + active dot. SPEC §10.1. */
.vc-member-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vc-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  user-select: none;
}
.vc-member-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.vc-member-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vc-muted, #9ca3af);
  display: inline-block;
}
.vc-member-dot--on  { background: var(--vc-success, #2e7d32); }
.vc-member-dot--off { background: var(--vc-danger,  #b00020); }

/* Unified booth picker (Booth + Voters tabs) — single card that hosts the
   combo picker AND the active-booth confirmation row. */
.vc-booth-picker { padding: 12px 14px; }
.vc-booth-picker__active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-left: 4px solid var(--vc-primary);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}
.vc-booth-picker__head strong { font-size: 16px; }