/* SM_DB: Video timeline autoplay by person (SWELL-friendly) */
.smvpa{
  --smvpa-accent: var(--swl-main-color, var(--color_main, #0b63ce));
  --smvpa-bg: var(--swl-card_bg, #fff);
  --smvpa-border: rgba(0,0,0,.12);
  --smvpa-radius: 10px;
}

.smvpa__playerBox{
  background: var(--smvpa-bg);
  border: 1px solid var(--smvpa-border);
  border-radius: var(--smvpa-radius);
  overflow: hidden;
}

.smvpa__yt{
  width: 100%;
  aspect-ratio: 16 / 9;
}

.smvpa__now{
  margin-top: .6rem;
  font-size: .95em;
  opacity: .9;
}

.smvpa__controls{
  margin-top: 1rem;
}

.smvpa__persons{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.smvpa__btn{
  appearance: none;
  border: 1px solid var(--smvpa-border);
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: .45rem .85rem;
  cursor: pointer;
  font-size: .92em;
  line-height: 1.2;
}

.smvpa__btn.is-active{
  border-color: transparent;
  background: var(--smvpa-accent);
  color: #fff;
}

.smvpa__btn--sub{
  background: #f7f7f7;
}

.smvpa__toggles{
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  align-items: center;
}

.smvpa__toggle{
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  font-size: .92em;
}

.smvpa__list{
  margin-top: 1rem;
  border: 1px solid var(--smvpa-border);
  border-radius: var(--smvpa-radius);
  overflow: hidden;
}

.smvpa__item{
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--smvpa-border);
  padding: .65rem .8rem;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: .35rem .7rem;
  align-items: center;
  cursor: pointer;
}

.smvpa__item:last-child{ border-bottom: 0; }

.smvpa__item:hover{ background: rgba(0,0,0,.03); }

.smvpa__item.is-active{ background: rgba(11,99,206,.10); }

.smvpa__item.is-hidden{ display: none; }

.smvpa__time{
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.smvpa__name{ font-weight: 600; }

.smvpa__badge{
  justify-self: end;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .78em;
}

@media (max-width: 640px){
  .smvpa__item{ grid-template-columns: 92px 1fr; }
  .smvpa__badge{ grid-column: 2 / 3; justify-self: start; }
}