/* IB Studio: the Votes page, one card per video with its three votes. Its tiles are the Pipeline's (css/pipeline.css). */
.vb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.vb-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--muted); font-size: 12.5px; }
.vb-progress .bar { flex: 1; height: 6px; margin: 0; }
.vb-progress small { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vb-list { display: flex; flex-direction: column; gap: 10px; }
.vbc { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--card-shadow); }
.vbc__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vbc__thumb { display: block; flex: none; width: 96px; height: 54px; border-radius: 9px; object-fit: cover; user-select: none; }
.vbc__thumb--none { display: grid; place-items: center; background: var(--paper-2); }
.vbc__main { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.vbc__title { overflow: hidden; color: var(--ink); font-size: 15.5px; font-weight: 650; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.vbc__title:hover { text-decoration: underline; }
.vbc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.vbc__owner { display: inline-flex; align-items: center; gap: 5px; }
.vbc__ask { display: inline-flex; align-items: center; gap: 5px; color: var(--red-ink); font-weight: 600; }
.vbks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vbk { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 11px; border: 0; border-radius: 12px; background: var(--paper-2); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .14s, box-shadow .14s; }
.vbk:hover { background: var(--paper-3); }
.vbk:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.vbk__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--paper); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.vbk__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.vbk__text b { font-size: 13.5px; font-weight: 650; }
.vbk__text small { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.vbk--mine { background: var(--red-soft); }
.vbk--mine:hover { background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red); }
.vbk--mine .vbk__ic { background: var(--red); color: #fff; box-shadow: none; }
.vbk--mine small { color: var(--red-ink); font-weight: 600; }
.vbk__dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.vbk--voted small { color: var(--green-ink); }
.vbk--voted .vbk__ic { background: var(--green-soft); color: var(--green-ink); box-shadow: none; }
.vbk--locked .vbk__ic { background: var(--amber-soft); color: var(--amber-ink); box-shadow: none; }
.vbk--locked small { color: var(--amber-ink); font-weight: 600; }
.vbk--none { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.vbk--none:hover { background: var(--paper-2); }
.vbk--none .vbk__ic, .vbk--none b { color: var(--muted); }
.vbk.is-open { box-shadow: 0 0 0 2px var(--ink); }
.vbc__body { display: flex; flex-direction: column; gap: 12px; }
.page-enter .vbc__body { animation: sstep-in .3s var(--ease); }
.vbc__idea { padding: 9px 12px; border-radius: var(--radius); background: var(--paper-2); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.vbc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.vbc__foot:empty { display: none; }
.vbc__alldone { display: inline-flex; align-items: center; gap: 5px; color: var(--green-ink); font-size: 13px; font-weight: 600; }
.tile-all { align-self: center; margin-left: auto; margin-right: 6px; }
.card__headrow:has(.tile-all) .count { order: 2; }
@media (max-width: 720px) {
  .vb-tiles, .vbks { grid-template-columns: minmax(0, 1fr); }
  .vbc__thumb { width: 72px; height: 40px; }
  .vbc__next { width: 100%; height: auto; padding-block: 8px; white-space: normal; }
}