/* How they voted (person pages; js/votes.js; the owner's pick of mock-votes): a folded card (css/person.css,
   .pb-fold), two columns wide on computers. */
.bento > .pb-votes { --bento-w: 2; }
@media (min-width: 621px) { .pb > .pb-votes { grid-column: span 2; } }

/* the three numbers */
.vt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.vt-stats > div { display: grid; align-content: start; gap: 2px; padding: 12px; border-radius: 18px; background: #f1effd; }
.vt-stats b { color: #1e1a67; font-size: 26px; line-height: 1; }
.vt-stats b small { color: #5d5a7d; font-size: 15px; }
.vt-stats span { color: #1e1a67; font-size: 14px; font-weight: 700; }
.vt-stats em { color: #5d5a7d; font-size: 12px; font-style: normal; }
.vt-stats em i { font-style: normal; font-weight: 700; }

.vt-tools { margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.vt-seg { display: flex; gap: 4px; width: max-content; }
.vt-seg .seg-btn { padding: 5px 12px; font-size: 13px; white-space: nowrap; }

/* a vote */
.vt-list { margin: 0; padding: 0; list-style: none; }
.vt-row { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #ecebf3; }
.vt-list > .vt-row:first-child { border-top: 0; }
.vt-none { padding: 12px 0; color: #5d5a7d; font-size: 14px; }
.vt-v { flex: none; display: grid; place-items: center; width: 48px; height: 28px; border-radius: 8px; font: 800 13px/1 var(--font-read); letter-spacing: .04em; }
.vt-v.is-yes { background: #e3f5ec; color: #0a7d4f; }
.vt-v.is-no { background: #fde6e6; color: #c0262d; }
.vt-v.is-miss { background: #eeedf3; color: #6b6890; }
.vt-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.vt-t { color: #111111; font-size: 16px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
a.vt-t:hover { text-decoration: underline; }
.vt-num { color: #6b6890; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vt-what { color: #3f3c5e; font-size: 14px; line-height: 1.35; }
.vt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #5d5a7d; font-size: 13px; }
.vt-meta .is-pass { color: #0a7d4f; }
.vt-meta .is-fail { color: #c0262d; }
.vt-flag { padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #7a5300; font-size: 12px; font-weight: 800; }
.vt-flag.is-split { background: #eeedf3; color: #5d5a7d; }
.vt-src { justify-self: start; color: #4232d4; font-size: 12px; font-weight: 700; }

/* how each party voted: the yes share of the bar */
.vt-pbs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; max-width: 420px; }
.vt-pb { display: grid; gap: 2px; color: #5d5a7d; font-size: 12px; }
.vt-pb b { color: #333333; }
.vt-pb-t { height: 6px; border-radius: 999px; background: #e7e6ee; overflow: hidden; }
.vt-pb-t i { display: block; height: 100%; border-radius: 999px; }
.vt-pb.is-d i { background: var(--party-democrat); }
.vt-pb.is-r i { background: var(--party-republican); }

.vt-more { display: block; width: 100%; margin: 4px 0 8px; padding: 10px; border: 0; border-radius: 14px; background: var(--btn-tint, #efedfd); color: var(--btn-ink, #1e1a67);
  font: 700 14px/1 var(--font-read); cursor: pointer; }
.vt-more[hidden] { display: none; }
.vt-proc { margin-top: 6px; padding: 10px 14px; border-radius: 16px; background: #f7f6fc; }
.vt-proc summary { color: #1e1a67; font-size: 14px; font-weight: 800; cursor: pointer; }
.vt-proc p { margin: 8px 0 0; color: #4d4a6c; font-size: 13px; }
.vt-foot { margin: 14px 0 0; color: #6b6890; font-size: 13px; }

@media (max-width: 620px) {
  .vt-stats { grid-template-columns: 1fr; }
  .vt-stats > div { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
  .vt-stats em { grid-column: 1 / -1; }
  .vt-row { gap: 10px; }
  .vt-v { width: 42px; }
  .vt-pbs { grid-template-columns: 1fr; }
}