/* The reader's word on a public thing, and how often it was read.

   One bar (assets/votes.js) on every Grid row and on the report,
   advisory and writeup pages: "12 liked" beside a cell that fills when
   the reader is one of them, and "340 reads". Set in mono like the rest
   of a row's facts; ink, never a hue. Tokens come from pratimana.css, so
   both themes hold without a rule here naming a colour. */
.vote-bar{ display:inline-flex; align-items:center; gap:14px; flex-shrink:0; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.vote-btn{
  display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:0 2px; border:0; border-radius:2px;
  background:transparent; color:var(--text-dim); font:inherit; cursor:pointer; transition:color .12s ease;
}
.vote-btn:hover{ color:var(--text); }
.vote-btn:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 2px var(--void), 0 0 0 4px var(--text); }
.vote-cell{ width:10px; height:10px; flex-shrink:0; }
.vote-cell rect{ fill:none; stroke:var(--text-faint); stroke-width:1; }
.vote-btn:hover .vote-cell rect{ stroke:var(--text); }
.vote-btn.active{ color:var(--text); }
.vote-btn.active .vote-cell rect{ fill:var(--text); stroke:var(--text); }
.vote-n{ font-variant-numeric:tabular-nums; color:var(--text); }
.vote-views{ display:inline-flex; align-items:center; gap:5px; min-height:28px; color:var(--text-faint); white-space:nowrap; }
.vote-views .vote-n{ color:var(--text-dim); }
.vote-views[hidden]{ display:none; }
.vote-bar.is-busy .vote-btn{ opacity:.6; pointer-events:none; }
.vote-hint{ font-size:11px; color:var(--danger); margin-inline-start:6px; }
@media (prefers-reduced-motion: reduce){ .vote-btn{ transition:none; } }