/* Public-site chrome. Loaded after the CDN Tailwind build, so plain CSS here
   always wins over a utility class if the two ever disagree. */

/* Every hoverable element reveals a border on hover. The border is always
   present (transparent when idle) so nothing shifts by a pixel. */
.hoverable {
    border: 1px solid transparent;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.hoverable:hover { border-color: var(--color-brand-300, #cbd5e1); }

/* Vote buttons: big targets, obvious states, no layout shift while posting. */
.vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    border-radius: .75rem;
    padding: 1.25rem 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vote-btn:disabled { opacity: .5; pointer-events: none; }
.vote-btn-no { background: #f1f5f9; color: #334155; }
.vote-btn-no:hover { background: #fff1f2; color: #be123c; border-color: #fda4af; }
.vote-btn-yes { background: var(--color-brand-600, #ea580c); color: #fff; }
.vote-btn-yes:hover { background: var(--color-brand-700, #c2410c); border-color: var(--color-brand-800, #9a3412); }

/* Vote-history bars on the member stats page. */
.vote-bars { display: flex; align-items: flex-end; gap: .25rem; height: 8rem; }
.vote-bars > div { flex: 1 1 0; min-width: .75rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.vote-bar-yes { width: 100%; border-radius: .25rem .25rem 0 0; background: var(--color-brand-500, #f97316); }
.vote-bar-no { width: 100%; border-radius: 0 0 .25rem .25rem; background: #cbd5e1; }